CSS是层叠样式表:具有层叠性--->
1 如果定义的样式重复的话,会遵循就近原则的,那个样式离结构近就执行那个样式
2 如果里面的样式不冲突的话,里面的样式也会得到执行,如下只有上面的颜色样式不会得到执行,字体会得到执行
CSS继承性:子标签会继承父标签的某些样式,如文本颜色和字号
如下没有给p标签设置属性,但是能够继承父亲div的属性
以下这些属性可以继承父亲的样式属性:text-,font-,line-,color 这些属性可以继承其他的不可以继承
CSS优先级:
标签选择器(p{}) 权重为 0.0.0.1<伪类选择器(:demo{})=类选择器(.demo{}) 权重为 0.0.1.1<id选择器(#demo{})<在行内直接定义<color:orangle !important
权重叠加: 如下图最终显示为blue
合并表格边框:
border-collapse: collapse; //这个就是将表格边框进行合并
设置边框为圆角:
border-radius:10px; //设置四个角为圆角的矩形 取该盒子 的宽度和高度的一半则会变成圆形,前提这个div盒子为正方形------------------------------>是按顺时针进行遍历的
内边距:就是内容和边框的距离 padding
***padding:20px //如果padding只写一个值 则表示上下左右都为20px
***padding:10px 20px //上下10px 左右20px
***padding:10px 20px 30px 40px //上10px 右20px 下30px 左40px 就是顺时针
***padding-left:20px; //左内边距20px
27号晚上
关于盒子(非常重要):
***盒子里面的文字的方位调整:text-align:center //这样盒子里面的文字就能够居中了
***设置盒子的位置 使用margin:10px auto //这样也可以设置盒子居中
***设置插入盒子图片的大小 直接修改图片的width height 因为插入的图片也类似于一个盒子
***设置背景图片的大小 只能用background-size:200px 200px ;
***更改图片的位置 backgroun-position:30px 50px
***一般图标的展示 使用的是背景图片 商品展示的时候采用插入图片
***一般我们插入背景图片的语法格式是这样子的 background:pink url(image/1.jpg) no-repeat; //设置图片不滚动
盒子的计算属性:
***盒子空间尺寸:width+border+padding+margin
***内盒尺寸:width+border+padding
关于外边距的塌陷的问题:
解决方案有三种:1.设置边框 防止孩子跑出去 2.设置padding:1px 3.overflow:hidden