<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局、选择器</title>
<link rel="stylesheet" type="text/css" href="04.css">
</head>
<body>
<div><a href="#Top" id="BTT">Back to top</a></div>
<div id="Top"></div>
<div>
<h3>问题</h3>
<ol>
<li>子元素与后代的区别:子元素是直接后代，后代包括子元素</li>
<li>相邻兄弟和后续兄弟区别相似，后续兄弟包括相邻兄弟</li>
</ol>
</div>
<div>
<h4>浮动与清除</h4>
<ul>
<li>float:;指定一个元素(盒子)是否可以浮动。left、right、none、inherit</li>
<li>clear:;指定不允许元素周围有浮动元素。left、right、both、none、inherit</li>
</ul>
</div>
<div>
<h4>对齐</h4>
<ul id="text">
<li>水平居中对齐
<ul>
<li>元素居中对齐
<ul>
<li>
margin:auto;
width: 50%;
</li>
</ul>
</li>
<li>文字居中对齐
<ul>
<li>text-align:center;</li>
</ul>
</li>
<li>图片居中对齐
<ul>
<li>
display:block;
margin:auto;
</li>
</ul>
</li>
</ul>
</li>
<li>左右对齐
<ul>
<li>使用定位即，position:absolute;right:0px;或left:0px;
<ul>
<li>绝对定位元素会被从正常流中删除，并能交叠元素。</li>
<li>使用该方法时通常要对body元素的margin和padding进行设置</li>
<li>设置!DOCTYPE申明（为IE8及更早版本）</li>
</ul>
</li>
<li>使用浮动
<ul>
<li>使用该方法时通常要对body元素的margin和padding进行设置</li>
<li>设置!DOCTYPE申明（为IE8及更早版本）</li>
<li>若子元素高度大于父元素，且子元素浮动，可以在父元素上添加overflow:auto;来解决子元素溢出问题</li>
</ul>
</li>
</ul>
</li>
<li>垂直居中对齐
<ul>
<li>使用padding
<ul>
<li>padding: xpx 0;</li>
<li>水平+垂直均对齐可使用:padding: xpx0;text-align:center;</li>
</ul>
</li>
<li>使用line-height,让line-height=height的值</li>
<li>使用position：absolute;top:50%;left50%
或transform:translate(-50%,-50%);</li>
</ul>
</li>
</ul>
</div>
<div>
<h4>组合选择符</h4>
<ul>
<li>后代选择器(以空格分隔)</li>
<li>子元素选择器(以>分割)</li>
<li>相邻兄弟选择器(以+分割)</li>
<li>普通兄弟选择器(以~分割)</li>
</ul>
</div>
<div>
<h4>属性选择器</h4>
<ul>
<li>属性选择器：
<ul>
<li>[title]{}</li>
<li>为包含title属性的所有元素设计样式</li>
</ul>
</li>
<li>属性和值选择器：
<ul>
<li>[title~=hello]{}</li>
<li>为包含title属性且该属性值包含hello的所有元素设计样式</li>
</ul>
</li>
<li>表单
<ul>
<li>input[type="text"]{}</li>
<li>为所有text设计样式</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
#BTT{
width: 2em;
height: 3em;
}
a#BTT:link{
position: fixed;
right:2em;
bottom: 3em;
text-decoration: none;
color: yellowgreen;
}
a#BTT:visited{
color: greenyellow;
}
a#BTT:hover{
color: yellow;
}
浙公网安备 33010602011771号