CSS盒子模型各属性层级及基础知识

59 阅读 0 评论 39 点赞

我是靠谱客的博主烂漫萝莉，最近开发中收集的这篇文章主要介绍CSS盒子模型各属性层级及基础知识，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

这里写图片描述

经测试box-shadow应该位于background-image之上并且位于content之下，因此对<img>标签设置内阴影会被其内容（图片）覆盖；
1.设置浮动属性后，会对相邻的元素产生影响，相邻元素特指仅邻后面的元素。
2.受到影响的元素清除flow影响的方法：clear：both；只适用于紧邻后面的元素的清楚浮动，而当父包含块缩成一条时就不起作用了。
或者同时设置width：100%；+overflow：hidden;例p受到影响，p{clear:both;或者p{width：100%；overflow：hidden；}
3.三种定位形式：static（静态）relative（相对）absolute（绝对）
相对定位：相对于自身原有位置进行偏移；仍处于文档流中；随即拥有偏移属性和Z-index属性；
绝对定位：建立以包含块为基准的定位；完全脱离了标准文档流；随即拥有偏移属性和Z-index属性；
未设置偏移量，无定位祖先元素，以为参考基准
使用absolute实现横向两列布局：relative-父元素相对定位；absolute-自适应宽度元素绝对定位

css：
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul < li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = “external”]）
9.伪类选择器（a: hover, li: nth - child）

可继承的样式： font-size font-family color, UL LI DL DD DT;
不可继承的样式：border padding margin width height ;
优先级就近原则，同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准;

优先级为:
!important > id > class > tag
important 比内联优先级高

css新增的伪类：
p:first-of-type 选择属于其父元素的首个

元素的每个

元素。
p:last-of-type 选择属于其父元素的最后

元素的每个

元素。
p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。
p:only-child 选择属于其父元素的唯一子元素的每个

元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。

如何居中div？如何居中一个浮动元素？

给div设置一个宽度，然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}

居中一个浮动元素
确定容器的宽高宽500 高 300 的层
设置层的外边距
.div {
Width:500px ; height:300px;//高度可以不设
Margin: -150px 0 0 -250px;
position:relative;相对定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}

列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？
1.
block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
2.
*absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

*fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
*relative
生成相对定位的元素，相对于其正常位置进行定位。
* static 默认值。没有定位，元素出现在正常的流中
*（忽略 top, bottom, left, right z-index 声明）。
* inherit 规定从父元素继承 position 属性的值。

CSS3有哪些新特性？
CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器多背景 rgba