CSS注意嵌套规则:
- 块级元素 可以包含内联元素或某些块级元素, 但是内联元素不能包含块级元素,它只能包含其他内联元素
- 有几个特殊的块级元素只能包含内联元素,不能包含块级元素. 如h1, h2, h3, h4, h5, h6, p
- li 内可以包含 div
- 块级元素与块级元素并列 , 内联元素与内联元素并列.
补充: (仅需要了解)
初始化CSS (需要了解)
为什么要初始化CSS？
建站老手都知道，这是为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
最简单的初始化方法就是： * {padding: 0; margin: 0;} 。有很多人也是这样写的。这确实很简单，但有人就会感到疑问：*号这样一个通用符在编写代码的时候是快，但如果网站很大，CSS样式表文件很大，这样写的话，他会把所有的标签都初始化一遍，这样就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间。
写过css的都知道每个网页引进的css首先都需要初始化，而出名的css reset有YUI css reset（QQ、淘宝等都出现他的影子），业内用的最多的还有Erik Meyer’s CSS Reset。
CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同，所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现浏览器之间的页面差异。每次新开发网站或新网页时候通过初始化CSS样式的属性，为我们将用到的CSS或html标签更加方便准确，使得我们开发网页内容时更加方便简洁，同时减少CSS代码量，节约网页下载时间。
雅虎工程师提供的CSS初始化示例代码
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }
- CSS进阶
布局常用属性样式:
属性 作用 举例
width 设置元素(标签)的宽度 width: 200px;
height 设置元素(标签)的高度 height: 200px;
background 设置元素背景色或者背景图片(详看下面) background: pink;
border 设置元素四周的边框 border: 1px solid pink;
border-top 设置元素顶部边框 border-top: 1px solid/ dashed pink;
border-left 设置元素左边边框 border-left: 1px solid pink;
border-right 设置元素右边边框 border-right: 1px solid pink;
border-bottom 设置元素底部边框 border-bottom: 1px solid pink;
文本常用样式属性:
color 设置文字的颜色 color: red;
font-size 设置文字的大小 font-size: 12px;
font-family 设置文字的字体 font-family: ‘Microsoft Yahei’; (微软雅黑)
font-weight 设置文字是否加粗 font-weight: bold; (bold:加粗 normal: 正常)
line-height 设置文字的行高 line-height: 24px; (文字高度加上文字上下间距共计24px)
text-decoration 设置文字的下划线 text-decoration:none; (取消下划线)
提示:样式中的注释
/* 设置头部的样式 */
.header{
width:960px;
height:80px;
background:gold;
}
浮动: ( float )
我们有时候为了让一行能够显示多个元素, 会设置元素的float属性:
浮动的表现 :
定义: 浮动的框可以向左或向右移动, 直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的浮动框之后的块框表现的就像浮动框不存在一样. (注意 这里是块框而不是内联元素; 浮动框只对它后面的元素造成影响 )
注意: 当初float 被设计的时候就是用来完成文本环绕的效果, 所以文本不会被挡住, 这是 float 的特性, 即 float 是一种不彻底的脱离文档流的方式.
<!DOCTYPE html>
<html lang="en">
<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>
.div1 {
width: 100px;
height: 100px;
background-color: pink;
}
.div2 {
width: 200px;
height: 100px;
background-color: blue;
}
.div3 {
width: 100px;
height: 200px;
background-color: green;
}
.div4 {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
</html>
特别注意
设置某一个元素为float 之后, 当前元素是否往前一个位置飘动,取决于上一个元素是否设置了float,如果设置了则飘动,如果没有设置,则还是在原来的位置, 只是飘起来, 不飘动.
如果一个容器中有两个子元素, 两个子元素都设置浮动浮起来之后,则容器会被压缩为一点.
<!DOCTYPE html>
<html lang="en">
<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>
.box {
width: 300px;
background-color: pink;
}
.sub1 {
width: 100px;
height: 100px;
background-color: limegreen;
float: left;
}
.sub2 {
width: 100px;
height: 100px;
background-color: olive;
float: left;
}
.box2 {
width: 400px;
height: 30px;
background-color: orangered;
}
</style>
</head>
<body>
<div class="box">
<div class="sub1"></div>
<div class="sub2"></div>
</div>
<div class="box2"></div>
</body>
</html>
补充:
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
css 浮动:
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
总结:
- 标签选择器的各种用法, 至少掌握基础和组合选择器,用的最多的是组合选择器,因此能背下来就都背下来.
- CSS 的样式属性设置, 这个相对简单, 多看两遍就记住了, 这个必须会. 不要告诉我这个搞不定, 不然要什么自行车.
- 这一章的重点就是浮动, 说白了就是飘起来, 连这个都学不会, 那你以后可以考虑成为爬行动物, 没有飞的希望了. 这个是重点. 多看看,不行了问我!
1395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
