文章目录
1.代码的书写顺序
板块(框架)→有效区→具体内容→样式
(一般有效区的宽度设置为1200px即可)
2.关于居中
- div居中:
margin: 0 auto;
3.关于定位
※ position属性
※ 定位属性
3.1 普通流
- 除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
- 块级框从上到下一个接一个地排列(竖直排列),框之间的垂直距离是由框的垂直外边距计算出来。
- 行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。
3.2 浮动
- 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
- 一但元素加了float语句,则要跟着写clear语句(因为浮动之后父级的高度就会丢失掉,加上clear就可以把父级丢失掉的高度找回来)、
代码:
<div class="clear"></div>
样式:
.clear{
clear: both;
}
注意:详细原理可以看 w3school 浮动知识点
3.3 相对定位
(1)如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。相对定位是“相对于”元素在文档中的初始位置
注意:在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
(2)子元素相对于父元素定位,父级或者再高的层级当作参照物。
- 参照物样式一般用相对定位:
position: relative;
- 子元素样式一般用绝对定位:
position: absolute;
3.4 绝对定位
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(根据用户代理的不同,最初的包含块可能是画布或 HTML 元素)。
提示:因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序(0:默认;-1:低优先级;1:高优先级)。
4.隐藏页面元素常用方法
- opacity: 0; ——从视觉上隐藏元素,而元素本身依然占据它自己的位置并对网页的布局起作用,它也将响应用户交互。
- visibility: hidden;——元素将会隐藏,也会占据着自己的位置,并对网页的布局起作用,与 opacity 唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏。如果一个元素的 visibility 被设置为 hidden,但是想要显示它的子元素,只要给想要显示的子元素添加visibility:visible;就可以了
- diaplay: none;——不生成盒模型,也不会在页面占据任何位置,不但如此,就连它的子元素也会一同从盒子模型中消失。并且给他和它的子元素添加的任何动画效果交互效果都会不起作用
5.css选择器
5.1 元素选择器
eg:
html {color:black;}
p {color:gray;}
h2 {color:silver;}
5.2 选择器分组
eg: 希望 h2 元素和段落都有灰色
h2, p {color:gray;}
5.3 类选择器 (.)
(1)
<html>
<head>
<style type="text/css">
.important {color:red;} //以·开头
</style>
</head>
<body>
<h1 class="important">This heading is very important.</h1>
</body>
</html>
(2)结合元素选择器
eg: class 属性值为 important 的所有段落
p.important {color:red;}
(3)多类选择器
<html>
<head>
<style type="text/css">
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;} //多类(中间不空格)
</style>
</head>
<body>
<p class="important">This paragraph is very important.</p>
<p class="warning">This is a warning.</p>
//多个类,中间空格
<p class="important warning">This paragraph is a very important warning.</p>
</body>
</html>
5.4 ID 选择器 (#)
eg: 以#开头
<html>
<head>
<style type="text/css">
#intro {font-weight:bold;}
</style>
</head>
<body>
<p id="intro">This is a paragraph of introduction.</p>
</body>
</html>
注意:ID选择器只能在文档中使用一次,并且不能结合使用,区分大小写。
5.5 属性选择器([ ])
(1)简单属性选择
eg1:只对有 href 属性的锚(a 元素)应用样式
<html>
<head>
<style type="text/css">
a[href]
{
color:red;
}
</style>
</head>
<body>
<a href="http://w3school.com.cn">W3School</a>
</body>
</html>
※ 还可以根据多个属性进行选择,只需将属性选择器链接在一起即可。
eg2: 将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
代码: <a title="W3School Home" href="http://w3school.com.cn">W3School</a>
css: a[href][title] {color:red;}
(2) 根据具体属性值选择
除了选择拥有某些属性的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素。
eg1: 将指向 Web 服务器上某个指定文档的超链接变成红色
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
eg2:
(3) 根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)
eg: 选择 class 属性中包含 important 的元素,可以用下面这个选择器做到这一点
<html>
<head>
<style type="text/css">
p[class~="important"]
{
color: red;
}
</style>
</head>
<body>
<h1>可以应用样式:</h1>
<p class="important warning">This is a paragraph.</a>
<p class="important">This is a paragraph.</a>
<hr />
<h1>无法应用样式:</h1>
<p class="warning">This is a paragraph.</a>
</body>
</html>
注意:如果忽略了波浪号,则说明需要完成完全值匹配。
(4)子串匹配属性选择器
eg: 如果希望对指向 W3School 的所有链接应用样式,不必为所有这些链接指定 class,再根据这个类编写样式,而只需编写以下规则:
a[href*="w3school.com.cn"] {color: red;}
提示:任何属性都可以使用这些选择器。
(5) 特定属性选择类型
最后介绍特定属性选择器。例如:
*[lang|="en"] {color: red;}
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此,以下示例标记中的前三个元素将被选中,而不会选择后两个元素:
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>
❣ 属性选择器汇总
5.5 后代选择器(空格分隔)
eg: 希望只对 h1 元素中的 em 元素应用样式,可以这样写(即用空格分隔):
h1 em {color:red;}
5.6 子元素选择器(>)
(1)选择子元素
如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。
eg: 如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的两个 strong 元素变为红色,但是第二个 h1 中的 strong 不受影响:
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
(2) 结合后代选择器和子选择器
eg:
table.company td > p
上面的选择器会选择作为 td 元素子元素的所有 p 元素,这个 td 元素本身从 table 元素继承,该 table 元素有一个包含 company 的 class 属性。
5.7 相邻兄弟选择器 (+)
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器
eg: 如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:
h1 + p {margin-top:50px;}
这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。
5.8 伪类——用于向某些选择器添加特殊的效果
(1) 锚伪类
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才有效; a:active 必须被置于 a:hover 之后,才有效。并且伪类名称对大小写不敏感。
(2) :first-child 伪类——选择元素的第一个子元素
详细例子看此 链接