如何理解 HTML 语义化
<div>
<div>这是一个标题</div>
<div>这是一个段文字</div>
<div>
<div>列表</div>
<div>列表</div>
</div>
</div>
<div>
<h1>这是一个标题</h1>
<p>这是一个段文字</p>
<ul>
<li>列表</li>
<li>列表</li>
</ul>
</div>
语义化的优点
- 让人更容易读懂,增加代码的可读性;
- 让搜索引擎更容易读懂,
SEO
;
常见的块状元素和内联元素
块状元素(独占一行):display: block/table
;比如 div、p、h、table、ul、ol
;
内联元素(排列在一行,直到浏览器换行):display: inline
;比如 span、img
;
行内块状元素(可以挤在一起,又可以设置宽高):display: inline-block
;input、button
;(也可以归类到内联元素)。
display: table 的作用
目前,在大多数开发环境中,已经基本不用 table 元素来做网页布局了,取而代之的是 div+css
,那么为什么不用table 系表格元素呢?
- 用
div+css
编写出来的文件 文件大小比用table
写出来的要小; table
必须在页面完全加载后才显示,没有加载完毕前,table
为一片空白,也就是说,需要页面加载完毕后才显示,而div
是逐行显示,不需要页面完全加载完毕,可以一边加载一边显示;- 非表格内容用
table
来写,不符合标签语义化要求,不利于SEO
; table
的嵌套性太多,用div
代码会比较简洁。
table
的作用:让块级标签实现行内效果,即浮动至同一横轴,并实现等高效果。
table
表格中的单元格最大的特点之一就是同一行列表元素都等高。所以,很多时候,我们需要等高布局的时候,就可以借助 display: table-cell
属性。
CSS 盒模型
offsetWidth = 内容宽度 width + 内边距 padding + border;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒模型</title>
<style type="text/css">
#div1 {
width: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
}
#div2 {
width: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
box-sizing: border-box; /* 让盒模型宽度 === 内容宽度width */
}
</style>
</head>
<body>
<div id="div1">
this is div1
</div>
<div id="div2">
this is div2
</div>
<script>
// document.getElementById('div1').offsetWidth // 122px
// document.getElementById('div2').offsetWidth // 100px
</script>
</body>
</html>
margin 纵向重叠
<head>
<style type="text/css">
p {
font-size: 16px;
line-height: 1;
margin-top: 10px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>
</body>
AAA与BBB的间距是15px
margin-top
与margin-bottom
会重叠;- 空的
p
标签会重叠。
margin 负值
margin-left
负值,自身向左移动;margin-top
负值,自身向上移动;margin-right
负值,自身没有影响,右侧元素向左移动;margin-bottom
负值,自身没有影响,下方元素向上移动;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>margin 负值</title>
<style type="text/css">
body {
margin: 20px;
}
.float-left {
float: left;
}
.clearfix:after {
content: '';
display: table;
clear: both;
}
.container {
border: 1px solid #ccc;
padding: 10px;
}
.container .item {
width: 100px;
height: 100px;
}
.container .border-blue {
border: 1px solid blue;
}
.container .border-red {
border: 1px solid red;
}
</style>
</head>
<body>
<p>用于测试 margin top bottom 的负数情况</p>
<div class="container">
<div class="item border-blue">
this is item 1
</div>
<div class="item border-red">
this is item 2
</div>
</div>
<p>用于测试 margin left right 的负数情况</p>
<div class="container clearfix">
<div class="item border-blue float-left">
this is item 3
</div>
<div class="item border-red float-left">
this is item 4
</div>
</div>
</body>
</html>
BFC 块级格式化上下文
一块独立的渲染区域,内部元素的渲染不会影响到边界以外的元素。BFC 的意思是形成一个范围,让内部元素不能脱离这个范围。
形成 BFC 的条件
float
不是none
position
是absolute
或fixed
overflow
不是visible
display
是inline-block
flex
的子元素
BFC的常见应用
清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.container {
background-color: #f1f1f1;
}
.left {
float: left;
}
.bfc {
overflow: hidden; /* 触发元素 BFC */
}
</style>
</head>
<body>
<div class="container bfc">
<img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;"/>
<p class="bfc">某一段文字……</p>
</div>
</body>
</html>
float 布局 - 实现圣杯布局和双飞翼布局
圣杯布局(三栏布局,左右两侧固定,中间自适应宽度,有一个头和尾)
float
布局margin
负值实现- 中间留白部分用
padding
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圣杯布局</title>
<style type="text/css">
body {
min-width: 550px;
}
#header {
text-align: center;
background-color: #f1f1f1;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
}
#center {
background-color: #ccc;
width: 100%;
}
#left {
position: relative;
background-color: yellow;
width: 200px;
margin-left: -100%;
right: 200px;
}
#right {
background-color: red;
width: 150px;
margin-right: -150px;
}
#footer {
text-align: center;
background-color: #f1f1f1;
}
/* 手写 clearfix */
.clearfix:after {
content: '';
display: table;
clear: both;
}
</style>
</head>
<body>
<div id="header">this is header</div>
<div id="container" class="clearfix">
<div id="center" class="column">this is center</div>
<div id="left" class="column">this is left</div>
<div id="right" class="column">this is right</div>
</div>
<div id="footer">this is footer</div>
</body>
</html>
双飞翼布局(三栏布局,左右两侧固定,中间自适应宽度)
float
布局margin
负值实现- 中间留白部分用
margin
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双飞翼布局</title>
<style type="text/css">
body {
min-width: 550px;
}
.col {
float: left;
}
#main {
width: 100%;
height: 200px;
background-color: #ccc;
}
#main-wrap {
margin: 0 190px 0 190px;
}
#left {
width: 190px;
height: 200px;
background-color: #0000FF;
margin-left: -100%;
}
#right {
width: 190px;
height: 200px;
background-color: #FF0000;
margin-left: -190px;
}
</style>
</head>
<body>
<div id="main" class="col">
<div id="main-wrap">
this is main
</div>
</div>
<div id="left" class="col">
this is left
</div>
<div id="right" class="col">
this is right
</div>
</body>
</html>
flex 布局 - 实现3点骰子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex 画骰子</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
border: 2px solid #ccc;
border-radius: 10px;
padding: 20px;
display: flex;
justify-content: space-between;
}
.item {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #666;
}
.item:nth-child(2) {
align-self: center;
}
.item:nth-child(3) {
align-self: flex-end;
}
</style>
</head>
<body>
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</body>
</html>
absolute 和 relative 定位问题
relative
是基于自身定位;absolute
是基于上层最近的一个定位元素而定位;
*[定位元素]:position
不是static
CSS - 图文样式
line-height 如何继承
line-height
如果是具体数值,比如 30px,则继承 30px;line-height
如果是比例,比如1.5,则继承比例1.5;line-height
如果是百分比,则继承父元素计算后的结果。
<style>
body {
font-size: 20px;
line-height: 200%;
}
p {
font-size: 16px;
/* 继承后的line-height: 40px; */
}
</style>
<body>
<p>AAA</p>
</body>
<style>
body {
font-size: 20px;
line-height: 30px;
}
p {
font-size: 16px;
/* 继承后的 line-height: 30px; */
}
</style>
<body>
<p>AAA</p>
</body>
<style>
body {
font-size: 20px;
line-height: 1.5;
}
p {
font-size: 16px;
/* 继承后的 line-height: 1.5; === line-height: 24px; */
}
</style>
<body>
<p>AAA</p>
</body>
CSS - 响应式
px
绝对长度单位;em
相对长度单位,相对于父元素;rem
相对长度单位,相对于根元素(html
),一般配合media-jquery
使用。
*[media-jquery
]:根据不同的屏幕宽度设置根元素的font-size
。相较于vw
和vh
的弊端,它是具有阶梯式的。vw
和vh
:vw
是网页视口宽度的百分之一,vh
是网页视口高度的百分之一。
*[屏幕高度/宽度]:window.screen.hieght/width
*[网页视口高度/宽度]:window.innerHieght/innerWidth
*[body
高度/宽度]:document.body.clientHieght/clientWidth
如图:667是屏幕高度,553是网页视口高度。
出处:https://coding.imooc.com/learn/list/400.html