1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > CSS层叠样式表-属性 /盒子模型

CSS层叠样式表-属性 /盒子模型

时间:2018-08-09 14:01:20

相关推荐

CSS层叠样式表-属性 /盒子模型

1、属性

(1)字体属性

官方文档:/css-zh/properties/font/index.htm

1)font-style

指定字体风格

2)font-weight

指定文本字体粗细

3)font-size

指定字体大小

4)font-family

指定文本使用某个字体或者字体序列

(2)边框属性

官方文档:/css-zh/properties/backgrounds/index.htm

1)border

设置边框样式

2)border-width

设置边框厚度

设置单边边框厚度

border-top-width:设置顶部边框厚度border-right-width:设置右边框厚度border-bottom-width:设置底部边框厚度border-left-width:设置左边框厚度

3)border-style

设置边框样式

4)border-color

设置边框颜色

设置单边边框颜色

border-top-color:设置顶部边框颜色border-right-color:设置右边框颜色border-bottom-color:设置底部边框颜色border-left-color:设置左边框颜色

(3)文本属性

官方文档:/css-zh/properties/text/index.htm

1)text-align

定义元素内容的水平对齐方式

2)text-indent

定义块内文本内容的缩进

3)vertical-align

定义行内元素在行框内的垂直对齐方式

4)letter-spacing

指定字符之间的额外间隙

5)text-transform

定义元素的文本如何转换大小写

6)word-spacing

指定单词之间的额外间隙

7)line-height

定义元素中行框的最小高度

(4)尺寸与补白

官方文档:/css-zh/properties/dimension/index.htm

1)width

定义元素宽度

2)height

定义元素内容区域高度

3)margin

为元素设置外边距

单边设置外边距

margin-top:设置顶部外边距margin-right:设置右边外边距margin-bottom:设置底部外边距margin-left:设置左边外边距

4)padding

为元素设置内边距

单边设置内边距

padding-top:设置顶部内边距padding-right:设置右边内边距padding-bottom:设置底部内边距padding-left:设置左边内边距

(5)布局属性

官方文档:/css-zh/properties/layout/index.htm

1)display

设置或检索对象是否及如何显示文档:/css-zh/properties/layout/display.htm

2)float

定义了元素向左或者向右浮动放置文档:/css-zh/properties/layout/float.htm

① 文档流

文档流:就是指文档的排列顺序;标准文档流:浏览器中网页的各个元素默认排列的方式(从上到下,从左到右);脱离标准文档流:不按照默认的方式,进行排列;

② 浮动的影响

浮动元素,会脱离标准文档流, 后面元素会向上移动父元素的高度发生了变化 ,因为浮动元素脱离标签文档流浮动元素变成了行内块级元素(在一行显示,可以设置宽高)

③ 清除浮动影响的方式

父元素设置高度父元素添加一个最小的块级子元素,给子元素设置 clear:both; 属性父元素设置 overflow:hidden; 属性父元素设置伪元素(after)父元素一起浮动

④ overflow 清除浮动与clear:both 清除浮动的区别

overflow 清除浮动:不会新增元素,易于使用,overflow对于绝对定位的元素不能清除浮动clear:both清除浮动:需要新增元素,性能较低,可以清除任何元素的浮动

3)clear

定义了一个元素是否可以放置在它之前的浮动元素旁边,或者必须向下移动在新行中放置文档:/css-zh/properties/layout/clear.htm

4)visibility

定义了元素是否可见文档:/css-zh/properties/layout/visibility.htm

5)overflow

定义了元素处理溢出内容的方式文档:/css-zh/properties/layout/overflow.htm

(6)定位属性

官方文档:/css-zh/properties/positioning/index.htm

1)position

用于指定一个元素在文档中的定位方式文档:/css-zh/properties/positioning/position.htm

2)z-index

定义一个元素在文档中的层叠顺序文档:/css-zh/properties/positioning/z-index.htm

3)top

定义了元素的上外边距边界与其包含块上边界之间的偏移文档:/css-zh/properties/positioning/top.htm

4)right

定义了元素的右外边距边界与其包含块右边界之间的偏移文档:/css-zh/properties/positioning/right.htm

5)bottom

定义了元素的底外边距边界与其包含块底边界之间的偏移文档:/css-zh/properties/positioning/bottom.htm

6)left

定义了元素的左外边距边界与其包含块左边界之间的偏移文档:/css-zh/properties/positioning/left.htm

7)clip

定义了元素的哪一部分是可见的。区域外的部分是透明的文档:/css-zh/properties/positioning/clip.htm

(7)颜色属性

官网文档:/css-zh/index.htm

注意

rgb,全称Red Green Blue,r(红色),g(绿色),b(蓝色)rgba,全称Red Green Blue Alpha,它是在 RGB 上扩展包括了 “alpha” 通道,r(红色),g(绿色),b(蓝色),a(透明度)除了设置线条颜色外,还可以设置为透明(transparent)

(8)列表属性

官方文档:/css-zh/properties/list/index.htm

1)list-style

设置列表项目相关内容

(9)表格属性

官方文档:/css-zh/properties/table/index.htm

1)border-collapse

设置或检索表格的行和单元格的边是合并还是独立

2)border-spacing

设置或检索当表格边框独立时,行和单元格的边框在横向和纵向上的间距

(10)变换

官方文档:/css-zh/properties/transform/index.htm

1)transform

设置或检索对象的转换

注意

这里取值,只是列举了部分值,详细文档请参考官方文档

(11)过渡

1)transition

检索或设置对象变换时的过渡官方文档:/css-zh/properties/transition/index.htm

(12)动画

官方文档:/css-zh/properties/animation/index.htm

1)animation

检索或设置对象所应用的动画特效

2、盒子模型

盒子模型是CSS非常重要的思维模型把每一个标签当成一个矩形盒子布局就是通过不同大小的盒子按照不同的排列方式组合而成盒子与盒子之间可以相互影响

(1)盒子模型类型

标准盒子模型怪异盒子模型注意:只要完整定义DOCTYPE都会触发标准模式,如果DOCTYPE缺失则在ie6/ie7/ie8下将会触发怪异模式
1)标准盒子模型

① 标准盒子模型组成

width:设置的宽度height:设置的高度padding:内填充border:边框margin:外边距(透明的)

② 标准盒子模型计算方式:

宽度:width + padding * 2 + border * 2 + margin * 2高度:height + padding * 2 + border * 2 + margin * 2
2)怪异盒子模型组成

① 怪异盒子模型组成

width:设置的宽度height:设置的高度margin:外边距

② 怪异盒子模型计算方式:

宽度:width(包含padding * 2 + border * 2) + margin * 2高度:height(包含padding * 2 + border * 2) + margin *2
更多CSS属性学习,请参考官网文档

/css-zh/index.htm

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。