css的三大特性 层叠性 继承性 优先级
层叠性
相同的选择器设置相同的样式,此时一个样式就会覆盖另一个样式
相同性原则:样式冲突原则是就近原则,哪个样式离结构近就执行那个
样式不冲突就不会覆盖另一个样式,不是后来的会把全部都会覆盖
例如:
div{
color:red
}
div{
color:pink
}
继承性
子标签会继承父标签的样式,虽然子标签没有设置样式也会继承父标签的样式,子承父业,但是一般继承的是(text- font- line- 以及color属性)
例如
div{
color:pink;
font-size:15px;
}
hahahaha
body的行高1.5此时自己的内容里面能继承的内容全是自己设置的1.5倍
优先级
选择器权重优先级:
0.0.0.0 0.0.1.0 0.1.0.0 1.0.0.0
从低到高是:继承 或者 * < 元素选择器 < 类选择器 伪类选择器 < ID选择器 < style样式 < !importment
复合层叠选择器权重叠加: ul li > li
重点盒子模型
网页布局的本质: 1.先准备好相关的网页元素,网页元素基本上都是盒子Box
2.利用css设置好盒子样式,然后摆放到相应的位置
3.往盒子里面装内容
网页布局的核心本质:就是利用CSS摆盒子
边框border(会在盒子外面加边框的宽度)
border-width:5px设置边框的宽度是5像素(粗细)
border-style:none | hidden | dotted (点线)| dashed(虚线) | solid(实线) | double |
简写:border:1px solid red没有顺序
border-bottom border-top border-left border-right 设置上下左右边框
border-collapse:合并相邻的单元格
padding 设置内边距,即边框与内容之间的距离
padding-left/right/top/bottom 边框与内容之间的距离
padding: 5px 表示上下左右全是5px
padding: 5px 10px;表示上下是5px 左右是10px
padding 5px 10px 15px 表示上5 左右10 下15 的像素
padding 5 10 15 20 上右下左顺时针
核心:这是内容与边距的距离
如果div 的宽高已经设置好,再加上padding,则表示的是在原先的宽高的基础上再加上padding的值表示此时的div的宽高值
如果此时不想盒子的宽度加长,就必须手动将盒子的宽度减少
另一种情况是不指定父级元素的宽度,则加上padding的值也不会改变宽度
margin:设置盒子的外边距,控制盒子与盒子之间的距离
margin-left/right/top/bottom 左、右、上、下外边距
参数与padding一样
外边距可以让块级元素盒子水平居中满足两个条件
1.盒子必须指定宽度
2.盒子左右的外边距都设置为auto
margin:0 auto;上下为0 左右自动居中显示
行内块元素可以给父级元素加上text-align : center
父亲的div 和 孩子的div 如果父亲的div 和孩子的 div都指定margin-top此时父亲和孩子的margin会增大,不会分离
如果给父亲添加边框此时孩子和父亲会分离,正常显示,只要给父亲的元素添加padding的值就会隔开
即父亲和孩子分离div方式:
1可以给父元素定义边框
2可以为父元素定义内边距
3可以为父元素添加overflow:hidden
清除内外边距
*{
padding:0;
margin:0;
}
ul li 里面的小圆点去除方法:list-style: none
圆角边框:
border-radius:length; 设置圆角边框也可以使用b%
盒子阴影:
box-shadow:
h-shadow :必须 水平阴影的位置 允许负值
v-shadow:必须 垂直阴影的位置 允许负值
blur :可选,模糊距离
spread:可选 阴影的尺寸
color:可选 阴影的颜色
inset:可选 将外部阴影改为内部阴影
默认的是外阴影,但是不可以写这个单词,否则导致阴影无效
盒子阴影不占用空间,不会影响其他盒子排列
div:hover{
box-shadow:10px 10px 10px -4px rgba(0 .0 .0 .3)
}
鼠标一方上就会出现效果
文字阴影
text-shadow: h-shadow v-shadow blur color:同盒子阴影
浮动:float
标准流:标签按照规定好的默认方式排列(块级元素 行内元素排列)
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
语法: 选择器{float:属性值}
属性值:none 元素不浮动(默认值) left 元素左浮动 right 元素向右浮动
使用浮动后,两个盒子一定在一行,若是左浮动,则这两个盒子连接在一块,放左侧,若是右浮动,则两个盒子放在两边,在一行
浮动特性(重难点)
1.浮动元素会脱离标准流(脱镖)
2.浮动元素会一行内显示并且元素顶部对齐
3.浮动元素会具有行内块元素的特性
最重要特性
1.脱离标准普通流的控制(浮)移到指定位置(东)(俗称脱镖)
2.浮动的盒子不再保留原先的位置
3.任何元素都有可以浮动,不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性
任何元素都可以浮动。不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性
1.如果块级元素没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,他的大小可以根据内容来决定
2.浮动的盒子中间是没有缝隙的,是紧挨着一起的
3.行内元素同理
1.6浮动元素经常和标准流父级 元素搭配使用
先用标准流的父级元素排列上下位置,之后内部元素采取浮动排列左右位置,符合网页布局第一准则
浮动应用float
- 1
- 2
- 3
- 4
设计样式标准:
先用标准流排列父元素,再用浮动排列子元素(这是标准)
1.即先用标准流的父元素排列上下位置,之后内部元素采取浮动排列左右位置
2.一个元素浮动了,理论上其余的兄弟元素也要浮动
浮动的盒子只会影响浮动的盒子后面的标准流,不会影响前面的标准流
清除浮动:
选择器{clear:属性;}
实际工作中一般是clear:both; 清除浮动的策略是:闭合浮动
方法:
1.额外标签法也成为隔墙法,是w3c的推荐做法
2.父级添加overflow属性
3.父级添加after伪元素
4.父级添加双伪元素
额外标签发1.会在浮动元素末尾添加一个空的标签,例如
注意:这个新的标签必须是块级元素
2.清除浮动 —父级添加overflow 其属性值设置为hidden auto scroll
3.清除浮动:after伪元素法 记住一定是给父元素添加
具体做法:.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
*zoom:1;
}
3.为元素
.clearfix:before,
.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1
}
清除浮动原因:
1.父级没高度
2.子盒子浮动了
3.影响下面布局了,我们就应该清楚浮动
学成在线案例
建议css书写顺序
1.布局定位属性:display/position/float/clear/visibility/overflow
2.自身属性:width/height/margin/padding/border/background
3.文本属性:color/font/text-decoration/text-align/vertical-align/white-space/break-word
4.其他属性(css3):content/cursor/border-radius/box-shadow/background:linear-gradient
导航栏实际开发注意:
实际开发中,不会直接用链接a,而是用li包含(li+a)的做法
1.li+a语义更清晰,有条理
2.浮动的盒子不会有外边距合并的问题