引入样式方法:
- 内联:style属性
- Style标签
- 外部文件 css link
- @import url(./b.css)
横排样式布局
- 给子级元素设置float:left;
- 父级元素添加clearfix/overflowh:hidden/为父级添加高度;
.clearfix::after{
content: '';
display: block;
clear: both;
}
元素脱离文档流的方式:
-
position:fixed 相对于屏幕固定 top:0 left:0
一旦脱离文档流 那你的父元素的高度就不受你控制了 就不管你了 只管其他文档流元素 -
子绝父相:子级元素position:absolute;父级元素position:relative;(绝对定位是相当于整个页面来的,父级元素给相对定位就相对于父级了);
span空格
<span>和</span>之间有东西 如果有一个回车 就会产生空格
例如:<span class="rs">RS</span>(回车)
<span class="card">card</span>
展示效果:RS card 会产生空格
例如:<span class="rs">RS</span><span class="card">card</span>
展示效果:RScard 不会产生空格
css布局
左右布局
<style>
.clearfix{content: '';display: block;clear: both;}
.left,.right{width: 400px;height: 400px;background: red;}
.left{float: left;}
.right{float: right;}
</style>
<div class="clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
左中右布局
- 可以前两个元素左浮动,第三个元素右浮动;也可以都左浮动
<style>
.clearfix{content: '';display: block;clear: both;}
.left,.middle,.right{width: 400px;height: 400px;background: red;float: left;}
.left,.middle{margin-right: 20px;}
</style>
<div class="clearfix">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
居中
水平居中
- 内联元素/内联块水平居中
- 只需给父级元素设置一个
text-align:center;
这里需要注意的是如果给内联元素设置了display:inline-block
也必须在线面紧接着写一个vertical-align:top;
要不然下面会有几像素的间距。
<style>
p{text-align: center;}
</style>
<p><span>aaaaa</span></p>
- 块级元素水平居中
- 只需为其设置一个宽度后,使用margin: 0 auto;
- 块级元素里面的文字内容水平居中也是使用
text-align:center;
<style>
div{
width: 300px;height: 300px;background: red;margin: 0 auto;
}
</style>
<div>aaa</div>
垂直居中
- 让元素的高度等于行高及height=line-height的值;
<style>
div{
width: 300px;
/*这两步是实现垂直居中的,上面可以不用看*/
height: 300px;line-height: 300px;
/*下面可以不用看*/
margin: 0 auto;background: red;text-align: center;
}
</style>
<div>aaa</div>
- 给上下一个相同的padding值
<style>
div{
background: red;text-align: center;
/*上面可以不用看*/
padding: 20px 0;
}
</style>
<div>aaa</div>
image
小技巧
- 只要是设置了绝对定位,就一定要给他的父级元素设置相对定位(子绝父相);
- 用css布局时尽量不要写宽和高两个属性(因为块级元素的宽度和高度都是由内部的文档流元素决定的),一般情况下可以用padding来填充。
- 内联元素不能设置宽和高,margin只对左右起作用,padding都起作用。
- 若要使用:after和:before属性(1).必须加一个content:’’;(2).必须设置成块级元素。
- 只要加了inline-block就一定要加vertical-align:top。
- 元素只要是设置了position为fixed或者absolute就会变成块级元素。
- 阻止 margin 合并
希望谁不要跟它的子元素的 margin 合并,就在它的::before /::after
加一个display:table;
.noCollapse::before{
content: '';
display: table;
}
::before 阻止任何东西把 margin (手)伸到外面去
.noCollapse::after{
content: '';
display: table;
}
::after 阻止任何东西把 margin (脚)伸到外面去
网友评论