CSS3 排版属性盒子模型 第二个模块
第05章-CSS3排版属性
CSS3排版属性
- 第05章-CSS3排版属性
- 学习目标
- CSS 列表
- 案例01
- CSS 隐藏
- 隐藏元素
- CSS 显示属性
- 案例03
- CSS 表格
- 案例04
- 表格隔行色
- 案例05
- CSS 盒子模型
- padding(填充)
- 案例06
- border(边框)
- outline(轮廓)
- margin(外边距)
- 外边距合并
- CSS3 box-shadow阴影
学习目标
- 掌握无序列表的应用
- 掌握有序列表
- 熟悉嵌套列表的使用方法
- 了解自定义列表的标记
- 掌握表格样式的使用
- 掌握CSS边框、边线、边距等属性
重点
- 掌握边框的扩展运用
重点
难点
- 掌握内边距和边框的合并方法
重点
难点
- 掌握CSS盒子模型原理
- 掌握外边距合并的方法
重点
难点
CSS 列表
CSS有序列表和无序列表属性
属性 | 描述 |
---|---|
list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
list-style-image | 将图象设置为列表项标志。(url(‘sqpurple.gif’)) |
list-style-position | 设置列表中列表项标志的位置。(inside| outside) |
list-style-type | 设置列表项标志的类型。如下表 |
列表属性可以简写,按照如下顺序
list-style-type
list-style-position
list-style-image
如果上述值丢失一个,其余仍在指定的顺序,就没关系。如:
ul {list-style: square inside url("sqpurple.gif");
}
案例01
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">ul{list-style-type: none;}a{text-decoration: none;}ul li{line-height: 50px;width: 200px;letter-spacing: 5px;text-indent: 8px;font-size: 18px;color: blue;font-weight: bold;background-color: bisque;}ul li:hover{background-color: darkcyan;color: white;}</style></head><body><ul><li><a href="">系统管理</a></li><li><a href="">会员管理</a></li><li><a href="">商品管理</a></li><li><a href="">订单管理</a></li></ul></body>
</html>
效果展示
list-style-type 属性设置列表项标记的类型参考
值 | 描述 |
---|---|
none | 无标记。 |
disc | 默认。标记是实心圆。 |
circle | 标记是空心圆。 |
square | 标记是实心方块。 |
decimal | 标记是数字。 |
decimal-leading-zero | 0开头的数字标记。(01, 02, 03, 等。) |
lower-roman | 小写罗马数字(i, ii, iii, iv, v, 等。) |
upper-roman | 大写罗马数字(I, II, III, IV, V, 等。) |
lower-alpha | 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) |
upper-alpha | 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) |
lower-greek | 小写希腊字母(alpha, beta, gamma, 等。) |
lower-latin | 小写拉丁字母(a, b, c, d, e, 等。) |
upper-latin | 大写拉丁字母(A, B, C, D, E, 等。) |
hebrew | 传统的希伯来编号方式 |
armenian | 传统的亚美尼亚编号方式 |
georgian | 传统的乔治亚编号方式(an, ban, gan, 等。) |
cjk-ideographic | 简单的表意数字 |
hiragana | 标记是:a, i, u, e, o, ka, ki, 等。(日文片假名) |
katakana | 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名) |
hiragana-iroha | 标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名) |
katakana-iroha | 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名) |
CSS 隐藏
显示控制常用的属性有display
、visibility
、opacity
隐藏元素
属性 | 显示 | 隐藏 | 特征 |
---|---|---|---|
display | 除了none之外的其他值 | none | 隐藏的元素不会占用任何空间,消失 |
visibility | visible | hidden | 隐藏的元素仍需占用与未隐藏之前一样的空间,仅不可见 |
opacity | 1 | 0 | 隐藏的元素只是变透明,仅不可见 |
下拉菜单
前面我们知道超链接a标签具有hover和active状态属性,其实这两个属性并不是超链接a标签专属,任何一个标签都具有这两个属性,因此,可以利用这两个属性来制作下拉菜单。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">ul{list-style-type: none;padding: 0;/*清除内边距*/}li{width: 200px;}a{text-decoration: none;}#menu1 li a{display: block;line-height: 50px;width: 200px;letter-spacing: 5px;text-indent: 8px;font-size: 18px;color: blue;font-weight: bold;background-color: bisque;}#menu1 li a:hover{background-color: darkcyan;color: white;}#menu1 li:hover #menu2{display: block;}#menu2 {display: none;}#menu2 li a{display: block;height: 50px;line-height: 50px;width: 200px;letter-spacing: 5px;text-indent: 8px;font-size: 18px;color: blueviolet;font-weight: bold;background-color: darkgrey;}#menu2 li a:hover{background-color: crimson;color: white;}</style></head><body><ul id="menu1"><li><a href="">系统管理</a><ul id="menu2"><li><a href="">系统参数</a></li><li><a href="">系统设置</a></li><li><a href="">系统版本</a></li><li><a href="">系统更新</a></li></ul></li><li><a href="">会员管理</a></li><li><a href="">商品管理</a></li><li><a href="">订单管理</a></li></ul></body>
</html>
效果展示
CSS 显示属性
display
主要用的CSS样式有以下三个:
属性 | 描述 |
---|---|
display:block | 显示为块级元素 特点:会自动换行,宽高可控 |
display:inline | 显示为内联元素 特点:不会换行,宽高不可控 |
display:inline-block | 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性 |
常将<li>
元素加上display:inline-block
样式,原本垂直的列表就可以水平显示了。
块级元素(block
)特性:
- 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
- 宽度(
width
)、高度(height
)、内边距(padding
)和外边距(margin
)都可控制;
内联元素(inline
)特性:
- 和相邻的内联元素在同一行;
- 宽度(
width
)、高度(height
)、内边距的top
/bottom
(padding-top
/padding-bottom
)和外边距的top
/bottom
(margin-top
/margin-bottom
)都不可改变,就是里面文字或图片的大小;
/* display: inline-block; */
/* 1.同行显示,并且可以设置宽高 */
/* 2.默认会产生间距,去间距:上级【font-size: 0px;】,所有下级【font-size: XXpx;】*
/* 3.文字基准线导致错开,解决方案:所有下级【vertical-align: top;】 */
案例03
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">ul{list-style-type: none;}a{text-decoration: none;}ul li{display: inline-block;line-height: 50px;width: 200px;letter-spacing: 5px;text-indent: 8px;font-size: 18px;color: blue;font-weight: bold;background-color: bisque;}ul li:hover{background-color: darkcyan;color: white;}</style></head><body><ul><li><a href="">系统管理</a></li><li><a href="">会员管理</a></li><li><a href="">商品管理</a></li><li><a href="">订单管理</a></li></ul></body>
</html>
效果图
CSS 表格
caption-side属性。
注意:IE8只有指定!DOCTYPE才支持caption-side属性。
值 | 描述 |
---|---|
top | 默认值。把表格标题定位在表格之上。 |
bottom | 把表格标题定位在表格之下。 |
表格边框属性
值 | 描述 |
---|---|
border | 表格边框:border: 1px solid black; |
指定CSS表格边框,使用border
属性。
下面的例子指定了一个表格的th
和td
元素的黑色边框:
table, th, td{border: 1px solid black;
}
但是表格有双边框。这是因为表和th
/ td
元素有独立的边界。
为了显示一个表的单个边框,使用 border-collapse
属性。
border-collapse
属性折叠边框
值 | 描述 |
---|---|
border-collapse | 表格边框合并:border-collapse: collapse; |
border-collapse
属性设置表格的边框是否被折叠成一个单一的边框或隔开:
table {/*合并表格与单元格之间的间距*/ border-collapse: collapse;
}
table,th,td {border: 1px solid black;
}
案例04
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#table1,th,td {border: 1px solid black;}#table2,#table2 th,#table2 td {border-collapse:collapse;border: 1px solid black;width:50%;height:30px;text-align:right;vertical-align:bottom;padding:15px;background-color:green;color:white;}</style></head><body><table id="table1"><caption>表格一</caption><tr><th>表头</th><th>表头</th></tr><tr><td>单元格</td><td>单元格</td></tr></table><table id="table2"><caption>表格二</caption><tr><th>表头</th><th>表头</th></tr><tr><td>单元格</td><td>单元格</td></tr></table></body>
</html>
效果图
表格宽度和高度
值 | 描述 |
---|---|
width | 表格宽度:表格、单元格 |
height | 表格高度:表格、行、单元格 |
下面的例子是设置100%的宽度,50像素的th元素的高度的表格:
table {width:100%;
}
th{height:50px;
}
表格内文字对齐
值 | 描述 |
---|---|
text-align | 单元格内容水平对其: |
vertical-align | 单元格内容垂直对其: |
表格中的文本对齐和垂直对齐属性。
text-align
属性设置水平对齐方式,像左,右,或中心:
td{text-align:right;
}
vertical-align
垂直对齐属性设置垂直对齐,比如顶部,底部或中间:
td{height:50px;vertical-align:bottom;
}
表格隔行色
实现表格隔行色的方法有很多,如
值 | 描述 |
---|---|
:nth-of-type(odd) | 基数 |
:nth-of-type(even) | 偶数 |
:nth-child (odd) | 基数 |
:nth-child (even) | 偶数 |
:nth-child (2n+1) | 基数 |
:nth-child (2n) | 偶数 |
如:
td:nth-of-type(odd){ background:#00ccff;}奇数行
td:nth-of-type(even){ background:#ffcc00;}偶数行 td:nth-child (odd){ background:#00ccff;}奇数行
td:nth-child (even){ background:#ffcc00;}偶数行td:nth-child (2n+1){ background:#00ccff;}奇数行
td:nth-child (2n){ background:#ffcc00;}偶数行
案例05
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">table{width: 80%;text-align: center;border-collapse: collapse;}th,td{height: 35px;color: white;}tr:nth-of-type(odd){background-color: #5F9EA0;}tr:nth-of-type(even){background-color: darkolivegreen;}td:nth-child(3n+3){background-color: #A52A2A;}</style></head><body><table border="0" align="center"><tr><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>身高</th><th>体重</th><th>签名</th></tr><tr><td>1</td><td>刘亦菲</td><td>女</td><td>32</td><td>168CM</td><td>50kg</td><td>那时觉得看哈数据库的</td></tr><tr><td>2</td><td>刘亦菲</td><td>女</td><td>32</td><td>168CM</td><td>50kg</td><td>那时觉得看哈数据库的</td></tr><tr><td>3</td><td>刘亦菲</td><td>女</td><td>32</td><td>168CM</td><td>50kg</td><td>那时觉得看哈数据库的</td></tr><tr><td>4</td><td>刘亦菲</td><td>女</td><td>32</td><td>168CM</td><td>50kg</td><td>那时觉得看哈数据库的</td></tr><tr><td>5</td><td>刘亦菲</td><td>女</td><td>32</td><td>168CM</td><td>50kg</td><td>那时觉得看哈数据库的</td></tr></table></body>
</html>
效果图
CSS 盒子模型
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
下面的图片说明了盒子模型(Box Model):
不同部分的说明:
outline
(轮廓) - 是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用margin
(外边距) - 清除边框外的区域,外边距是透明的。border
(边框) - 围绕在内边距和内容外的边框。padding
(内边距) - 清除内容周围的区域,内边距是透明的。content
(内容) - 盒子的内容,显示文本和图像。
padding(填充)
padding(填充)属性定义元素边框与元素内容之间的空间
属性 | 说明 |
---|---|
padding | 使用缩写属性设置在一个声明中的所有填充属性 |
padding-bottom | 设置元素的底部填充 |
padding-left | 设置元素的左部填充 |
padding-right | 设置元素的右部填充 |
padding-top | 设置元素的顶部填充 |
填充- 单边内边距属性
在CSS
中,它可以指定不同的侧面不同的填充:
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
填充 - 简写属性
填充 - 简写属性
padding:25px;
- 所有的填充都是25px
padding:25px 50px;
- 上下填充为25px
- 左右填充为50px
padding:25px 50px 75px;
- 上填充为25px
- 左右填充为50px
- 下填充为75px
padding:25px 50px 75px 100px;
- 上填充为25px
- 右填充为50px
- 下填充为75px
- 左填充为100px
案例06
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.content{padding: 80px 10% 100px;background-color: rgba(0,0,0,0.1);}</style></head><body><div class="content"><h1>欢迎您</h1><p>这是一个神奇的网站</p></div></body>
</html>
效果展示
border(边框)
CSS 边框属性
属性 | 描述 |
---|---|
border | 简写属性,用于把针对四个边的属性设置在一个声明。 |
border-style | 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。 |
border-width | 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。 |
border-color | 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。 |
border-bottom | 简写属性,用于把下边框的所有属性设置到一个声明中。 |
border-bottom-color | 设置元素的下边框的颜色。 |
border-bottom-style | 设置元素的下边框的样式。 |
border-bottom-width | 设置元素的下边框的宽度。 |
border-left | 简写属性,用于把左边框的所有属性设置到一个声明中。 |
border-left-color | 设置元素的左边框的颜色。 |
border-left-style | 设置元素的左边框的样式。 |
border-left-width | 设置元素的左边框的宽度。 |
border-right | 简写属性,用于把右边框的所有属性设置到一个声明中。 |
border-right-color | 设置元素的右边框的颜色。 |
border-right-style | 设置元素的右边框的样式。 |
border-right-width | 设置元素的右边框的宽度。 |
border-top | 简写属性,用于把上边框的所有属性设置到一个声明中。 |
border-top-color | 设置元素的上边框的颜色。 |
border-top-style | 设置元素的上边框的样式。 |
border-top-width | 设置元素的上边框的宽度。 |
border-style属性值
值 | 描述 |
---|---|
none | 默认。无轮廓。 |
dotted | 点状的轮廓。 |
dashed | 虚线轮廓。 |
solid | 实线轮廓。 |
double | 双线轮廓。双线的宽度等同于 outline-width 的值。 |
groove | 3D 凹槽轮廓。此效果取决于 outline-color 值。 |
ridge | 3D 凸槽轮廓。此效果取决于 outline-color 值。 |
inset | 3D 凹边轮廓。此效果取决于 outline-color 值。 |
outset | 3D 凸边轮廓。此效果取决于 outline-color 值。 |
inherit | 规定应该从父元素继承轮廓样式的设置。 |
类型和轮廓是一样的
border-radius 属性
语法
border-radius: 左上角 右上角 右下角 左下角;
注意: 每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。如果省略左下角,右上角是相同的。如果省略右下角,左上角是相同的。如果省略右上角,左上角是相同的。
值 | 描述 |
---|---|
length | 定义弯道的形状。 |
% | 使用%定义角落的形状。 |
box-sizing属性
语法:
box-sizing: content-box|border-box|inherit:
值 | 说明 |
---|---|
content-box |
指定元素的宽度和高度不包含元素的padding 和border
|
border-box |
指定元素的宽度和高度包含元素的padding 和border
|
outline(轮廓)
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
属性 | 说明 |
---|---|
outline | 在一个声明中设置所有的轮廓属性 |
outline-color | 设置轮廓的颜色 |
outline-style | 设置轮廓的样式 |
outline-width | 设置轮廓的宽度 |
outline-style属性值
值 | 描述 |
---|---|
none | 默认。无轮廓。 |
dotted | 点状的轮廓。 |
dashed | 虚线轮廓。 |
solid | 实线轮廓。 |
double | 双线轮廓。双线的宽度等同于 outline-width 的值。 |
groove | 3D 凹槽轮廓。此效果取决于 outline-color 值。 |
ridge | 3D 凸槽轮廓。此效果取决于 outline-color 值。 |
inset | 3D 凹边轮廓。此效果取决于 outline-color 值。 |
outset | 3D 凸边轮廓。此效果取决于 outline-color 值。 |
inherit | 规定应该从父元素继承轮廓样式的设置。 |
margin(外边距)
margin
(外边距)属性定义元素周围的空间。
属性 | 描述 |
---|---|
margin | 简写属性。在一个声明中设置所有外边距属性。 |
margin-bottom | 设置元素的下外边距。 |
margin-left | 设置元素的左外边距。 |
margin-right | 设置元素的右外边距。 |
margin-top | 设置元素的上外边距。 |
margin清除周围的元素(外边框)的区域。margin没有背景颜色,是完全透明的
margin可以单独改变元素的上,下,左,右边距。也可以一次改变所有的属性。
值 | 说明 |
---|---|
auto | 设置浏览器边距。 这样做的结果会依赖于浏览器 |
length | 定义一个固定的margin(使用像素,pt,em等) |
% | 定义一个使用百分比的边距 |
Margin - 单边外边距属性
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Margin - 简写属性
为了缩短代码,有可能使用一个属性中margin
指定的所有边距属性。这就是所谓的缩写属性。
margin:25px;
- 所有的4个边距都是25px
margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
外边距合并
- 当子元素的顶部和父元素的顶部仅仅贴在一起(既:中间没有相隔的内容)时,子元素的顶部外边距会和父元素的外边距合并,最终变成父元素的外边距。
- 解决方法一:在父元素和子元素之间插入一个
br
标签 - 解决方法二:给父元素加
padding:0.1px
; - 解决方法三:把子元素的
margin-top
用padding-top
来代替
- 解决方法一:在父元素和子元素之间插入一个
- 同级的相邻兄弟元素,上一个兄弟元素的底部外边距和下一个元素的顶部外边距会合并,最终两元素之间的外边距不是相加,而是变成两个元素中外边距的最大值
CSS3 box-shadow阴影
语法
box-shadow: h-shadow v-shadow blur spread color inset;
注意:box-shadow
属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset
关键字来规定。省略长度的值是 0。
值 | 说明 |
---|---|
h-shadow | 必需的。水平阴影的位置。允许负值 |
v-shadow | 必需的。垂直阴影的位置。允许负值 |
blur | 可选。模糊距离 |
spread | 可选。阴影的大小 |
color | 可选。阴影的颜色。 |
inset | 可选。从外层的阴影(开始时)改变阴影内侧阴影 |
CSS3 排版属性盒子模型 第二个模块相关推荐
- css3的弹性盒子模型,css3弹性盒子模型——回顾。
1.box-flex属性规定框的子元素是否可伸缩其尺寸. 父元素必须要声明display:box;子元素才可以用box-flex. 语法:box-flex:value; 示例: .test_box { ...
- 8.2 css3 新增标签 盒子模型 长度单位 颜色 渐变 径像渐变
# CSS3 盒子模型 * box-sizing 值 content-box 默认值 包括所有的值 / border-box 只算边框的长与宽 * resiz ...
- html盒子有哪些属性,盒子模型有哪些属性 在html5中哪些元素具有盒子模型
HTML盒模型基本属性有哪些 CSS盒子模型就是在CSS技术所使用的一种思维模型.CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框,可以形象地将其看作是一个 ...
- CSS层叠样式表-属性 /盒子模型
1.属性 (1)字体属性 官方文档:https://www.apiref.com/css-zh/properties/font/index.htm 1)font-style 指定字体风格 属性用法 描 ...
- 盒子模型划分网页模块--音乐盒
音乐盒 <div>标签 分割为独立的部分 实现页面的规划和布局 盒子模型有 内容,宽高(width height:),内边距(margin),边框(border),外边框(padding ...
- 盒子模型划分网页模块--播放器图标
播放器图标 三角形模型原码: <style> .triangle{ width: 0; height: 0; border: 40px ...
- 运用盒子模型划分网页模块--创意图文
创意图文 实例: 程序: 程序原码: <!doctype html> <html> <head> <meta charset="utf-8" ...
- HTML05——行内块级元素_文档流_font属性_盒子模型_练习
目录 行内块级元素 文档流 font属性 文本段落 文字属性 盒子模型 概念和属性 常见问题 块元素和行元素的相互转换 display属性 overflow属性 边框.宽度与高度 浮动float 练习 ...
- 前端基础(13):CSS3新增属性和选择器
学习目标 1.CSS3的概念.优势及应用 2.渐进增强和优雅降级的简介 3.CSS3部分新增选择器的语法及应用 4.CSS3的新增属性语法及应用 一.CSS3的概念.优势及应用 CSS3是css技术的 ...
最新文章
- Java 汉子转拼音
- WCF服务端运行时架构体系详解[下篇]
- ArcGIS API for JavaScript压缩版(compact)与标准版的区别
- php 数组交集函数,PHP array_intersect_uassoc 函数
- C++单链表的建立和遍历
- SQLite移植手记1
- 开源自己用python封装的一个Windows GUI(UI Automation)自动化工具,支持MFC,Windows Forms,WPF,Metro,Qt...
- [转载] --- 让线程按顺序执行8种方法
- hjimce算法类博文目录
- 在用到select2时,临时抱佛脚学习了一下
- vim 编辑器 bash文件测试
- java mvc接收 时间_Springmvc 如何接收java8的时间localDateTime。
- apache cxf 测试webservice接口
- Android7.1 Audio Debug相关方法
- CANOPEN 学习(一) CANFestival 字典工具 环境搭建
- idea导入项目框架的方法
- Redis之单机数据库的实现
- 宇视NVR如何宇视云解绑?
- hdu 吉哥系列故事——完美队形 (最长公共子序列)
- Unity3d模型导入都需要注意哪些事项?