标签:等于 str 决定 作用 一个 ica end column color
1.盒子模型主要定义四个区域:内容(content)、内边距(padding)、边框(border)、外边距(margin)
2.border,设置元素的边框,属性(边框三要素):宽度、样式、颜色,这也是通常border属性值的书写顺序(非严格要求)
单独书写:border-width(宽度,默认3px)、border-style(样式,默认none)、border-color(颜色,默认黑色)
border-style属性值:dotted(点状)、solid(实线)、double(双实线)、dashed(虚线)、无边框(none)
3.padding,设置元素内容与边框之间的距离,增加内边距会扩大元素边框所占用的区域
书写格式:padding:value(四边设置,可多值)、padding-top/right/bottom/left:value(单边设置),value取值可以为像素、百分比,但不能为负数
4.margin,设置元素边框外周围的空白区域,外边距是透明的
书写格式:margin:value(四边设置、可多值)、margin-top/right/bottom/left:value(单边设置),value取值可以为像素、百分比、auto、负数
外边距合并,当两个垂直外边距相遇时,他们将形成一个外边距,即外边距合并
合并后的外边距的高度等于发生合并的两个外边距中高度较大者
两个块级元素是包含关系时,要设置被包含元素的相对边距,需要增加父元素border(边框)或使用“ overflow:hidden”或“ padding”
外边距特点:① 块级元素的垂直相邻外边距外边距会合并,② 行内元素不占上下外边距,且左右外边距不会合并,③ 浮动元素的外边距也不会合并,④ 允许指定负数外边距值
5.怪异盒子,盒子模型分为两种,一种是符合W3C规范的标准盒子模型,另一种是IE的盒子模型,也被叫做怪异盒子
IE盒子模型也包括margin、border、padding、content,不过IE盒子模型的宽(width)包含了border和padding
6.box-sizing,该属性用于指定当前元素使用哪种盒子模型,标准(W3C)或 怪异(IE)
属性值:
content-box(标准),padding和border不会被包含在width和height内
border-box(怪异),padding和border被包含在width和height内,即元素实际大小只与width和height有关
7.flexbox,伸缩盒子模型(也叫弹性盒子)
它决定一个盒子在其他盒子中的分布,以及如何处理可用的空间。
该模型可以轻松的创建“自适应”浏览器窗口的流动布局。
传统盒子模型基于HTML文档流排列,弹性盒子模型可以规定特定的顺序。
通过设置 display属性值为 flex开启弹性盒子模型。
设置了弹性盒子模型后,float、clear、vertical-align在 flex中不起作用。
8.flex
基本结构:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS选择器</title> <style> .d0 { width: 100%; height: 600px; background-color: aliceblue; display: flex; } .d1 {flex-grow: 1; background-color: blue;} .d2 {flex-grow: 2; background-color: aquamarine;} .d3 {flex-grow: 1; background-color: coral;} </style> </head> <body> <div class="d0"> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> </div> </body> </html>
display:flex,定义外层父容器 d0为弹性布局,默认为水平布局
flex-grow:value,该属性表示当前子项目在父容器中的占比,默认值为0
flex-direction,定义灵活项目的布局方向,属性值:row(默认值,灵活项目水平排列)、row-reverse(灵活项目以相反的顺序水平排列)
column(灵活项目垂直排列)、column-reverse(灵活项目以相反的顺序垂直排列)
justify-content,设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,使用该属性之前必须先声明父元素为弹性盒子
属性值:flex-start(默认值,子项目位于容器的开头)、flex-end(子项目位于容器的结尾)、center(子项目位于容器的中心)、
space-between(子项目位于各行之间留有空白的容器内)、space-around(子项目位于各行之前、之间、之后都留有空白的容器内)
align-items,该属性定义灵活子项目在flex父容器的侧轴(纵轴)方向上的对齐方式
属性值:stretch(默认值,拉伸子项目以适应容器)、center(子项目在容器中心)、flex-start(子项目在容器开头)、flex-end(子项目在容器末端)、baseline(子项目在容器基线)
标签:等于 str 决定 作用 一个 ica end column color
原文地址:https://www.cnblogs.com/husa/p/13368626.html