• web前端css(二)


    一.  标准文档流

    标准文档流中会有一些现象: 空白折叠 和 高低不齐边底对齐的现象

    标准文档流等级森严, 标签分为两种等级: 行内元素 和 块级元素.

    1. 行内元素 和 块级元素的区别:

    行内元素:不能设置宽高, 默认的宽度就是文字的宽度;  与其他行内元素并排

    块级元素:设置宽高, 如果不设置就默认宽度是父级的100%; 独占一行,不与其它任何元素并列

    2. 标签分类

    在HTML中已经将标签分过类了,当时分为文本级 和 容器级

    a)     从HTML的角度来讲,标签分为:

    文本级标签:  p,  span,  a,  u下划线,  i斜体(已废弃),  em斜体(已废弃),  b粗体(已废弃)

    容器级标签:  div,  li,  dt,  dd, h系列

    这里为什么说p是文本级标签呢? 因为p里面只能放 文字, 图片, 表单.

    P里不能放h系列, 不能放ul 也不能放p.

    b)     现在从css角度看和上面很像,就p不一样:

    行内元素: 除了p之外,所有的文本级标签都是行内元素.  P是文本级标签但是是个块级元素

    块级元素:所有的容器级标签 div lid dt dd h, 还有 p 标签

    3. 块级元素和行内元素的转换

    我们可以通过display属性将块级元素和行内元素相互转换

    块级元素转行内元素:   设置display:inline;

    行内元素转块级元素:  设置display:block;

    4. 脱离标准文档流

    标准文档流的限制非常多,导致很多页面效果无法实现. 如果我们想要并排而且要设置宽高(行内元素不能设置宽高的), 那么就需要浮动, 脱离标准文档流.

    二.  浮动

    浮动是css里面布局最多的一个属性,也是很重要的一个属性. float表示浮动,有以下的属性值:

    float: none; 不浮动,默认

             left 左浮动

             right 右浮动

    浮动要想学好,就得知道浮动的四大特性:

    1. 浮动的元素脱标(就是脱离标准文档流), 标签一旦设置浮动,就能够并排了. 而且不再区分行内元素和块状元素, 都可以设置宽高
    2. 浮动的元素会相互贴靠
    3. 浮动的元素有”字围”效果
    4. 收缩的效果,就是一个浮动元素如果没有设置width, 那么就自动收缩为文字的宽度(这点和行内元素很像)

    三.  清除浮动

    先看一个html和css的代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .father{
            width: 1126px;
                
        }
        .box1{
            width: 200px;
            height: 200px;
            float: left;
            background-color:pink;
        }
        .box2{
            width: 100px;
            height: 100px;
            float: left;
            background-color:red;
        }
        .box3{
            width: 200px;
            float: left;
            height: 100px;
            background-color:grey;
        }
        .father2{
            width: 1126px;
            height: 400px;
            background-color:yellow;
        }
        </style>
    </head>
    <body>
        <div class="father">
            f1
            <div class="box1">box1</div>
            <div class="box2">box2</div>
            <div class="box3">box3</div>
        </div>
        <div class="father2">f2</div>
    </body>
    </html>

    效果是如果不给父盒子一个高度的话, 那么浮动的子元素是不会填充父盒子的高度, 此时.father2 的盒子就跑到第一个位置上去了, 影响页面的布局.

    浮动可以实现页面元素并排的效果, 这是好处, 但是会影响布局, 所以我们要清除浮动.

    清除浮动有4种方式:

    1. 给父盒子设置高度
    2. 内墙法(给浮动元素的后面加一个块级标签,再给这个标签设置clear:both属性)
    3. 伪元素清除法(常用)
    4. overflow: hidden(常用)

    应用: 伪元素清除浮动的写法:

          给浮动元素的父盒子, 就是不浮动的元素添加一个clearfix类,然后设置如下:

    .clearfix{
        content:.;
        display:block;
        height:0;
        visibility:hidden;
        clear:both;  
    }

    关于overflow: 值

    描述

    visible

    默认值,内容不会被修剪,会呈现在元素框之外

    hidden

    内容会被修剪,超出元素之外的部分不可见

    scroll

    不管内容是否超出元素框都会出现滚动条

    auto

    如果内容超出元素框,则浏览器会显示滚动条以便查看其余内容

    inherit

    规定继承父类元素的overflow属性值

    逐渐演变成了overflow:hidden清除法

    其实它是一个BFC区域,  具体参见:https://blog.csdn.net/riddle1981/article/details/52126522

    四.  Margin中的坑

    1. Margin塌陷问题

    当给两个标准流下的兄弟盒子设置垂直方向上的margin时候,那么以较大的值为准,那么我们称这种现象叫塌陷. 记住这种现象在布局垂直方向盒子的时候要注意margin的用法. 水平方向上没有塌陷

    当我们给两个标准流下的兄弟盒子设置浮动之后,就不会出现塌陷问题了

    1. margin: 0 auto;

    当一个div元素设置margin:0 auto; 之后盒子就会居中, 这表示上下外边距是0, 左右为auto的距离, 那么auto是什么意思呢?若设置margin-left:auto; 我们就会发现盒子尽可能大的右边有很大距离,没有什么意义. 同理,若设置margin-right:auto;盒子会尽可能大的左边有很大距离,当两条语句并存的时候,盒子尽可能大的左右两边有很大的距离,此时就居中了.

    注意:

    1. 使用margin:0 auto; 的时候, 水平居中的盒子必须有width, 要有明确的width值
    2. 如果给盒子设置浮动, 或者固定定位, 或者绝对定位, 那么margin:0 auto就失效了
    3. Margin: 0 auto是使盒子居中而不是文本居中, 文字水平居中使用text-align:center
    4. 善于用父级的padding,而不是margin

    另外一定要知道margin属性是兄弟盒子之间的, padding是父子盒子之间的

    先看一下下面的代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
       .father{
            width:300px;
            height:300px;
            background-color:blue;
        }
       .son{
            width:100px;
            height:100px;
            background-color:orange;
            margin-top:10px;
        }
        </style>
    </head>
    <body>
         <div class="father">
            <div class="son"></div>
        </div>
    </body>
    </html>

    运行上面的代码发现, 两个盒子整体下移动了30px, 其实我们是想让子盒子下移动30px, 父盒子不动, 但因为父盒子没有border, 所以父盒子也掉下来了. 一旦给父盒子加上border之后就可以了. 那么问题来了, 我们不可能无缘无故给父盒子加一个border啊, 所以此时解决的方法只有一个就是使用父盒子的padding, 让子盒子往下移动

    五.  字体图标使用

    阿里巴巴矢量图标库

  • 相关阅读:
    SVN日常使用
    zabbix安装
    shell日常脚本(centos6)
    mysql故障记录
    PHP商品秒杀功能实现思路分析
    Redis
    PHP 实现实时通信一般有两种方式
    FTP DNS SMTP POP3 HTTP HTTPS DHCP DNS SNMP Telnet 端口号
    TCP/UDP/HTTP的区别和联系
    TCP 和 UDP 的区别
  • 原文地址:https://www.cnblogs.com/kenD/p/9696840.html
Copyright © 2020-2023  润新知