2018/4/26
1. 高级选择器
E F 后代 F在E内
E>F 子 F是E的子元素
层次: E+F 相邻兄弟 F紧位于E后
E~F 通用兄弟 E后所有匹配的F
E:first-child 作为父元素的第一个子元素的元素E
E:last-child 作为父元素的最后一个子元素的元素E
E F:nth-child(n) 选择父级元素E的第一个子元素F(n可以是
结构伪类 1,2,3,关键字为Even、odd)
E:first-of-type 选择父元素内具有指定类型的第一个E元素
E:last-of-type 选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)选择父级元素E的第n个类型为F子元素
注意:E F:nth-child(n) 在父级从第一个元素开始查找,不分类型
EF:nth-of-type(n) 在父级里先看类型,再查找
E[attr] 具有属性attr的元素E
E[attr=val] 选择匹配具有属性attr且属性值为val(区分大小写)的E
属性 E[attr^=val] ~属性值为以val开头的任意字符串~
E[attr$=val] ~属性值为以val结尾的任意字符串~
E[attr*=val] ~字符串val与属性值中任意位置匹配 ~
2018/4/27
1. li标签紧贴,inline-block,无间隙
2. <span>标签:凸显标签内几个文字或某个词语
3. 并集选择器:P .show,.bird span{}
4. 字体样式:
font-family 类型
font-size 大小 单位:px、em、rem等
font-style 风格 normal、italic、oblique(后两个倾斜程度不同
font-weight 粗细 normal、bold、bolder、lighter
font 在一个声明中设置所有属性 font:italic bold 36px “宋体”
5. p{font-family:Verdana,”楷体”;}
6. 1em等于当前字体尺寸
7. 字体粗细:100~900 normal=400 bold=700
8. 文本属性:
color RGB(16进制)、RGBA(增加Alpha透明度 0-1,用三原色表示,
255,255,255 红绿蓝
Text-align 水平对齐 left、right、center、justify(两端对齐)
Text-indent 首行缩进
Line-height 行高
Text-decoration 文本装饰 none、underline、overline、line-through
9.颜色:3对相同可缩写 eeff66 ef6
10.行高大于或等于字体大小
11.文本阴影:
Text-shadow :color x-offset y-offset blur-radius(模糊半径)
x
y
2018/4/28
1. 伪类样式:选择器:伪类器名{声明;}
2. 清楚浏览器记录:ctrl+shift+delete
3. 设置伪类顺序:link-visited-hover-active
4. Div块元素,能够指定宽高的一个区域。
5. List-style-type常用值:none、disc(默认,实心圆)、circle(空心圆)、square(实心正方形)、decimd(数字)
6. <ol type=“i”>罗马数字
7. 调样式:F12大法
8. Background-position(关键词可任意组合)
1. Xpos Ypos
2. X% Y%
3. 水平:left、center、right
X、Y方向关键词
垂直:top、center、bottom
9.background:颜色、图像、定位、是否重复
10.渐变需加浏览器前缀
1.IE Trident内核 -ms-
2.Safari/Chrome Webkit -webkit-
3.Opera Blink-o-
4.Firefox Mozilla -moz-
11.radial、linear径向(无方向)、线性
2018/5/2
1.全局选择器 *{margin:0;}
2.网页居中对齐:margin:0auto;
3.ul{padding-left:0;}
4.border-box:盒子宽高等于元素内容宽高
Content-box: 默认 2*(border+padding+margin)+width
2018/5/3
1. border-radius制作圆形:
l 宽、高必须相等
l 圆角半径为元素宽度的一半或50%
2. 上、下半圆:
l 元素的宽度是高度的两倍
l 圆角半径等于元素的高度值
3. 左右半圆:
l 元素的高度是宽度的两倍
l 圆角半径为元素的宽度值
4. 扇形:
l “三同”:元素宽、高、圆角半径相同
l “一不同”:圆角取值位置不同(弧线对应取值位置)
5. 兼容不同浏览器提供的标签的默认距离(使用并集选择器)
(各种标签用逗号隔开) {padding:0;margin:0;}
6.#beautyul li:hover a {color:pink;}
选中li标签,控制其中元素
7.box-shadow:inset(内阴影,删除后是外阴影) x-offsety-offsetblur-radiuscolor
8.标准文档流:指元素根据块元素或行内元素的特性从上到下、从左到右的方式自然排列,这也是元素默认的排列方式。
9.内联元素可以包含于块元素中,反之不成立。
2018/5/4
1. 解决父级边框塌陷的四个方法
1. 浮动元素后加空div(代码冗余)
<divclass="clear"></div>
.clear{
clear:both;
magin:0;
padding:0;
}
2. 设置父元素的高度(影响元素的扩展性)
3. 父级添加overflow属性(有下拉列表框的场景不能用)
visible:默认,溢出内容呈现在盒子之外
hidden:被修剪
scroll:被修剪,显示滚动条
auto:如果被修剪,显示滚动条
4. 父级添加伪类after(稳如老狗)
.clear:after{
content: ''; /*在clear类后添加的内容为空*/
display: block; /*把添加的内容转化为块元素*/
clear: both; /*清除这个元素两边的浮动*/
}
2. class=“myboxclear”在class里面,空格表示多样式
3. 牛客网