css选择器第⼀个class_CSS（三）换⾏
如果某个单词太长，不适合在⼀个区域内，它扩展到外⾯：
允许长⽂本换⾏:
p {word-wrap:break-word;}
保证单词完整的前提下换⾏
单词拆分换⾏
还有⼀种normal使⽤浏览器默认的换⾏规则。
id 和 class 选择器
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应⽤于元素属性 id="para1":
#para1 { text-align:center; color:red; }
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作⽤。
class 选择器
class 选择器⽤于描述⼀组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使⽤。
class 选择器在HTML中以class属性表⽰, 在 CSS 中，类选择器以⼀个点"."号显⽰：
在以下的例⼦中，所有拥有 center 类的 HTML 元素均为居中。
< {text-align:center;}
所有的 p 元素使⽤ class="center" 让该元素的⽂本居中
类名的第⼀个字符不能使⽤数字！它⽆法在 Mozilla 或 Firefox 中起作⽤。
margin的布局⽅法
两栏结构⽤margin如何布局
absolute + margin ⽅式
HTML
<header id="hd">头部</header>
<div id="bd">
<aside id="aside">侧边栏固定宽度</aside>
<div id="main">主内容栏⾃适应宽度</div>
</div>
<footer id="ft">底部</footer>
CSS
#aside{
position:absolute;
top:0;
left:0;
width:200px;
}
#main{
margin-left:210px;
}
特点：#main 可以⾃适应可⽤空间。在内容量不可控的场景，不推荐使⽤这种⽅式，旁边的aside溢出部分将会被裁减，影响布局效果。float + margin ⽅式
HTML
<header id="hd">头部</header>
<div id="bd">
<aside id="aside">侧边栏固定宽度</aside>
<div id="main">主内容栏⾃适应宽度</div>
</div>
<footer id="ft">底部</footer>
CSS
#aside{
float:left;
width:200px;
}
#main{
margin-left:210px;
}cssclass属性
缺点: 这种⽅式⽆法⽀持主内容优先显⽰float + 负margin ⽅式HTML
<header id="hd">头部</header>
<div id="bd">
<div id="main">主内容栏⾃适应宽度</div> <aside id="aside">侧边栏固定宽度</aside> </div>
<footer id="ft">底部</footer>
CSS
#bd{
padding-left:210px;
}
#aside{
float:left;
position:relative;
left:-210px;
width:200px;
margin-left:-100%;
}
#main{
float:left;
width:100%;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。