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

原创 2016年06月01日 00:07:53

这里写图片描述
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

版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS基础学习十四:盒子模型补充之display属性设置

我们在CSS
  • erlian1992
  • erlian1992
  • 2015年11月20日 18:45
  • 3098

带有层次关系的css

 .t {   border-style:solid;border-color:royalblue;border-width:1}.t td{   border-style:dotted;border...
  • wubai250
  • wubai250
  • 2006年02月03日 16:31
  • 1231

CSS z-index 属性 控制div上下层次

CSS,z-index,div层次
  • jackpk
  • jackpk
  • 2010年10月20日 09:35
  • 38487

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

1.设置浮动属性后,会对相邻的元素产生影响,相邻元素特指仅邻后面的元素。 2.受到影响的元素清除flow影响的方法:clear:both;只适用于紧邻后面的元素的清楚浮动,而当父包含块缩成一条时就不...
  • DevilLittle
  • DevilLittle
  • 2016年06月01日 00:07
  • 3343

CSS框模型(盒子模型)padding与border属性

框结构模型图一: 元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。 ...
  • wujiancanling
  • wujiancanling
  • 2013年06月11日 12:06
  • 2003

CSS--两种盒子模型以及border属性

盒模型(box model) 概述: margin(-TopRightBottomLeft), padding(-TRBL),border(TRBL+style|color|width), box...
  • cat_foursi
  • cat_foursi
  • 2017年05月04日 22:05
  • 1570

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

经测试box-shadow应该位于background-image之上并且位于content之下,因此对标签设置内阴影会被其内容(图片)覆盖; 1.设置浮动属性后,会对相邻的元素产生影响,相邻元素特...
  • qi1271199790
  • qi1271199790
  • 2017年01月31日 14:55
  • 513

CSS基础学习十四:盒子模型补充之display属性设置

我们在CSS
  • erlian1992
  • erlian1992
  • 2015年11月20日 18:45
  • 3098

CSS基础学习十六:CSS盒子模型补充之border-radius属性

CSS盒子模型有很多的内容和属性,CSS也一直在更新和新增属性,今天我们来说说CSS3新增的盒子模型中的 边框中的内容,也就是border-radius属性。        border-radi...
  • erlian1992
  • erlian1992
  • 2015年11月22日 20:41
  • 2156

CSS box-flex属性,然后弹性盒子模型简介

一、淡淡的开头语 昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是...
  • yzbben
  • yzbben
  • 2016年07月28日 16:49
  • 463
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS盒子模型各属性层级及基础知识
举报原因:
原因补充:

(最多只允许输入30个字)