CSS知识总结(下）

居中

元素水平居中行内元素水平居中

text-align:center;

块元素水平居中

margin:0 auto ;

单行文字垂直居中
高等于行高

height:n px; #可以注释
line-height:n px;

网页的布局方式?

网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的

标准流排版方式

垂直排版, 如果元素是块级元素, 那么就会垂直排版
水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版

浮动

浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐

脱标

当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标

浮动元素排序规则

相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面

不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动

浮动元素贴靠

父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示

父元素的宽度不能显示所有浮动元素, 那么会从最后一个元素开始往前贴靠

贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边

清除浮动

父元素的高度是由子元素撑开的，且子元素设置了浮动，父元素没有设置浮动，子元素脱离了标准的文档流，那么父元素的高度会将其忽略，如果不清除浮动，父元素会出现高度不够.

https://blog.csdn.net/qq_31915745/article/details/72524465

给前面一个父元素设置高度
给后面的盒子添加clear属性

clear属性取值:
none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
left: 不要找前面的左浮动元素
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素
### 网页的布局方式
网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的
### 标准流
- 垂直排版: 如果元素是块级元素, 那么就会垂直排版
- 水平排版:如果元素是行内元素/行内块级元素, 那么就会水平排版

外墙法

在两个盒子中间添加一个额外的块级元素

给这个额外添加的块级元素设置clear: both;属性

内墙法

在第一个盒子中所有子元素最后添加一个额外的块级元素

给这个额外添加的块级元素设置clear: both;属性

overflow: hidden;作用
可以将超出标签范围的内容裁剪掉
通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来

定位流

相对定位

相对定位就是相对于自己以前在标准流中的位置来移动
position: relative;

什么是绝对定位?

绝对定位就是相对于body来定位
position: absolute;

绝对定位left: 50px;才有这种等写法

子绝父相
子元素用绝对定位, 父元素用相对定位

如何让绝对定位的元素水平居中

只需要设置绝对定位元素的left:50%

然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;

练习

在这里插入图片描述

<div>
    <img src="images/meat.jpg" alt="">
    <span class="hot"></span>
    <span class="price"></span>
    <p>【2店通用】Love Taste爱味道牛排生活馆 双人套餐，提供免费WiFi</p>
</div>

思路：将最大的div相对定位，两个span绝对定位，在用left等属性进行定位

div{
    width: 300px;
    height: 300px;
    border: 2px solid #ccc;
    margin: 0 auto;  #水平居中
    margin-top: 100px;
    position: relative;
}
div img{
    width: 300px;
    height: 200px;
}
div .hot{
    width: 45px;
    height: 44px;
    background: url("images/tuangou.png") no-repeat 0px -280px;
    /*display: inline-block;*/
    position: absolute;
    left: 0;
    top: 0;
}
div .price{
    width: 134px;
    height: 42px;
    background: url("images/tuangou.png") no-repeat 0px -362px;
    /*display: inline-block;*/
    position: absolute;
    left: -7px;
    top: 163px;
}

在这里插入图片描述

<div>
    <img src="images/ad.jpg" alt="">
    <span class="leftArrow">&lt;</span>
    <span class="rightArrow">&gt;</span>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</div>

css

div{
    width: 520px;
    height: 280px;
    border: 2px solid gold;
    margin: 0 auto;
    margin-top: 100px;
    position: relative;
}
div span{
    /*margin-top: 10px;*/
    /*display: block;*/
    width: 40px;
    height: 80px;
    background-color: rgba(0,0,0,0.3);
    font-size: 50px;
    color: white;
    text-align: center;
    line-height: 80px;
}
div .leftArrow{
    position: absolute;
    left: 0px;
    top: 100px;
}
div .rightArrow{
    position: absolute;
    right: 0px;
    top: 100px;
}
ol{
    list-style: none;
    width: 200px;
    height: 40px;
    background-color: rgba(255,255,255,0.7);
    position: absolute;
    right: 10px;
    bottom: 10px;
}
ol li{
    width: 40px;
    /*height: 40px;*/
    line-height: 40px;
    text-align: center;
    border: 1px solid gold;
    box-sizing: border-box;
    float: left;
}

居中

网页的布局方式?

标准流排版方式

浮动

清除浮动

定位流

猜你喜欢