学习了一周时间,今天的内容稍微多一点点难一点点,不过还能接受的了.
今天依旧讲的css,除了昨天剩下的一点点伪元素选择器之外,还详细的讲了css的继承性,css的层叠性和优先级以及文档流和盒子模型.
1.伪元素选择器
::first-letter 选中第一个字符 ::first-line 选中第一行 ::selection 用鼠标选中的那些文本 ::before, ::after 头部或尾部 伪元素选择器可以用 : 也可以用 :: 推荐使用双冒号
2.css的继承性
后代元素会继承祖先元素的某些属性 可以继承的属性: color,font-xxx,text-xxx,line-xxx 不能继承的属性 background-color,盒子模型相关的
3.css的层叠性及优先级
如果多个选择器同时选择一个元素,但是只会执行其中一个的样式,最后总会选出其中一个执行其中的样式. 3.1 重要性 如:color:red!important; 加了上面这个,便是无论如何都会执行这个, 如果同时设置了这个或者同时没有设置就会进行优先级比较. 不到万不得已,不推荐使用这个. 3.2 优先级 3.2.1行内样式 3.2.2ID的个数 3.2.3类,伪类,属性选择器的个数 3.2.4元素,伪元素的个数 *特殊性为0,只能选择元素. 3.3 如果说特殊性一样,执行源码的顺序在后面的. 继承不能进行比较.
4.文档流
文档流中,元素分为两种:块级元素,行内元素 1.块级元素(block) 在父容器中独占一行 可以设置宽和高 块级元素的内部可以嵌套任意的元素 只能出现在body 如:div h ul,li p 2.行内元素/内联元素(inline) 不会独占一行 不能设置宽和高 行内元素只能嵌套文本和其他的行内元素. a,img,表单元素,span,i 3.行内元素和块级元素交换 display:block; 把行内元素转换为块级元素 display:inline;把块级元素转换为行内元素
5.盒子模型
外边距:margin 内边距:padding 边框线:border 内容区:content 1. 内容或者子元素一定是处于父容器的content区域. 2. 如果增加padding和border都会导致整个盒子的变换. 3. 水平:margin-left, margin-right, width heigh三者可以设置为auto, 水平方向其他属性只能是具体的值. - 一个块级盒子的总的水平方向的尺寸,一定是等于父容器的width的值. - width的auto > margin-left的auto = margin-right的auto - width如果不设置是auto, margin-left和margin-right如果不设置是0 - 任何方向, 如果padding和border没有声明, 一定是0 - margin可以是负值, 其他的只能是大于等于0的值. 4. 垂直: height如果设置为auto, 高度会自动包含住内容. 其他的auto的都会成为0
6.属性的简写
margin和padding属性的简写 简写属性会有一个叫做值复制的动作在里面. 如果后面只带一个值,即上下左右都是那个值 如果后面带两个值,即上面为第一个值,右边为第二个值,下面复制上面的值,左面复制右边的值. 依次类推,按照上右下左的顺序对号入座. border的简写 border:边框宽度 边框样式(分为solid实线 dashed虚线 dotted点状) 边框颜色 边框颜色简写:border-color:颜色1 颜色2 颜色3 颜色4; 边框样式简写:border-style:... 边框宽度简写:border-width:...
7.margin塌陷
如果两个margin接触到一起,便会出现塌陷. 水平方向的margin不会出现塌陷. margin塌陷后, 如果margin值都为正值或者同为负值,那么取绝对值最大的那个值. 如果margin值有正有负,那么值取最大的正数+最小的负数