web 前端

发布日期: 2021-01-02

更新日期: 2021-01-14

阅读次数:

css前端页面布局

前端三件套里面除了javascript之外，比较难学的就是css的页面布局操作，可以说css掌握好布局那么基本上就能写出一个一般通俗的静态页面了，其他都可以现学现抄

开始前补充关于div几个比较重要的知识点：

div独占一行，所以第二个div默认情况下永远在div的下面，纵向排列
即使div设置了宽高，依旧会根据孩子进行宽高调整，而我们设置的宽高只是背景颜色范围，这也是为什么很多时候子div看起来溢出了页面的原因
div有自身的固有属性，比如总是会有8px的margin，为了美观记得消除margin等效果

浮动布局

浮动布局指：

将元素排除在普通流之外
元素不在页面占据空间
将浮动元素放置在包含框的左右边
浮动元素依旧位于包含框之内

浮动的框可以向左或者向右移动，直到外边缘碰到包含框或另一个浮动边框为止

浮动元素的外边缘不会超过其父元素的内边缘
浮动元素不会相互重叠
浮动元素不会上下浮动
任何一个元素浮动，display属性完全失效，并且不会独占一行

语法：

float:none/left/right;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box&#123;
            width: 600px;
            height: 600px;
            background: deeppink;
        &#125;
        #box>div:first-child&#123;
            width: 200px;
            height: 200px;
            background: green;
        &#125;
        #box>div:nth-child(2)
        &#123;
            width: 200px;
            height: 200px;
            background: blue;
        &#125;
        #box>div:nth-child(3
        )
        &#123;
            width: 200px;
            height: 200px;
            background:red;
        &#125;
    </style>
</head>
<body>
    <div id="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

效果图如下:

倘若设置浮动：

    <style>
        #box&#123;
            width: 600px;
            height: 600px;
            background: deeppink;
        &#125;
        #box>div:first-child&#123;
            width: 200px;
            height: 200px;
            background: green;
            float: right;
        &#125;
        #box>div:nth-child(2)
        &#123;
            width: 200px;
            height: 200px;
            background: blue;
            float: right;
        &#125;
        #box>div:nth-child(3
        )
        &#123;
            width: 200px;
            height: 200px;
            background:red;
        &#125;
    </style>

效果图如下：

说明float碰到边缘停止，

打个比方，大的div外边框相当于七巧板的框

而不浮动的div相当于七巧板的框内花纹，而浮动的div相当于七巧板，碰到同样的七巧板或者边框就停止

原有的行容不下div的时候，会自动到下一行找更大空间

覆盖关系由孩子关系决定

div的本质属性是不设置宽度的时候独占一行，
span标签的特点是没有宽高属性，并且不会独占一行
如果设置了float，给无宽高属性的元素会生效宽高属性

如果父元素没有设置宽高，而子元素有设置宽高，那么父元素会根据子元素调整自己的宽高属性

例如：

  <style>
        #box&#123;
            /* width: 600px;
            height: 600px; */
            background: deeppink;
        &#125;
        #box>div:first-child&#123;
            width: 200px;
            height: 200px;
            background: green;
            /* float: right; */
        &#125;
        #box>div:nth-child(2)
        &#123;
            width: 200px;
            height: 200px;
            background: blue;
            /* float: right; */
        &#125;
        #box>div:nth-child(3
        )
        &#123;
            width: 200px;
            height: 200px;
            background:red;
        &#125;
    </style>

效果图如下，说明:

div的本质属性是不设置宽度的时候独占一行，
- 所以父元素占了一整行
- 子元素虽然宽没有满行，但是依旧占了一整行，导致排成一列
父div根据子div调整宽高

如果给部分元素恢复浮动，如下：

    <style>
        #box&#123;
            /* width: 600px;
            height: 600px; */
            background: deeppink;
        &#125;
        #box>div:first-child&#123;
            width: 200px;
            height: 200px;
            background: green;
            float: right;
        &#125;
        #box>div:nth-child(2)
        &#123;
            width: 200px;
            height: 200px;
            background: blue;
            float: right;
        &#125;
        #box>div:nth-child(3
        )
        &#123;
            width: 200px;
            height: 200px;
            background:red;
        &#125;
    </style>

效果图如下：

那么说明在有浮动条件下div感受根据浮动调整，可以认为外边框是一个可伸缩的长方形边框

内部元素float的情况下，父亲感知不到内元素高度

解决方法：

设置父元素宽高

父元素设置overflow:hidden;

如下：

  <style>
        #box&#123;
            /* width: 600px;
            height: 600px; */
            background: deeppink;
            overflow: hidden;
        &#125;
        #box>div:first-child&#123;
            width: 200px;
            height: 200px;
            background: green;
            float: right;
        &#125;
        #box>div:nth-child(2)
        &#123;
            width: 200px;
            height: 200px;
            background: blue;
            float: right;
        &#125;
        #box>div:nth-child(3
        )
        &#123;
            width: 200px;
            height: 200px;
            background:red;
            float: right;
        &#125;
    </style>

如下图所示：

父类设置浮动,兄弟元素清除浮动clear

注意浮动是优先在行内操作

假设现在有一个div，宽度不比行内宽度小，所以不足以移到下一行，若想移到下一行，则要设置

clear:both;
/*清除两边浮动*/

这个可以抵消其他元素浮动对当前元素的影响

属性：clear

值：left,right,both

头部布局以及font字体图标使用

网页布局的时候一般是先水平再垂直，头部布局一般适用于网页导航栏

这里先学习导航栏的布局：

html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="./css/style.css"/>
        <!-- 这里引入css文件 -->
    </head>
    <body>
        <div id="header">
            <div class="header">
                <div class="header_left">

                </div>
                <div class="header_right">

                </div>
            </div>
        </div>
    </body>
</html>

引入的css文件：

#header&#123;
    width: 100%;
    height: 40px;
    background: red;
&#125;
.header&#123;
    width: 50%;
    height: 40px;
    background: green;
&#125;
.header_left&#123;
    width: 200px;
    height: 40px;
    background: aqua;
&#125;
.header_right&#123;
    width: 300px;
    height: 40px;
    background: pink;
&#125;

初步的效果图如下：

但是注意到由于div独占一行的原因

这里pink的div出来了，说明等待解决问题

利用上次学到的浮动属性，让pink和aqua在green里面浮动：

#header&#123;
    width: 100%;
    height: 40px;
    background: red;
&#125;
.header&#123;
    width: 50%;
    height: 40px;
    background: green;
&#125;
.header_left&#123;
    width: 200px;
    height: 40px;
    background: aqua;
    float: left;
&#125;
.header_right&#123;
    width: 300px;
    height: 40px;
    background: pink;
    float: right;
&#125;

效果图如下：

图丢了

这时首页头部的基本框架搭好了，取消父类容器颜色，并且加入子类文字：

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="./css/style.css"/>
        <!-- 这里引入css文件 -->
    </head>
    <body>
        <div id="header">
            <div class="header">
                <div class="header_left">
                    <div >
                        <span >
                            我是头部
                        </span>
                    </div>

                </div>
                <div class="header_right">

                </div>
            </div>
        </div>
    </body>
</html>

css:

#header&#123;
    width: 100%;
    height: 40px;
    /* background: red; */
&#125;
.header&#123;
    width: 50%;
    height: 40px;
    /* background: green; */
    border:1px solid #FF0000;
&#125;
.header_left&#123;
    width: 200px;
    height: 40px;
    /* background: aqua; 取消父类容器颜色*/

    float: left;
&#125;
.header_right&#123;
    width: 300px;
    height: 40px;
    background: pink;
    float: right;
&#125;
.header_left>div&#123;
    float: left;
    line-height: 40px;
    color: dimgray;
    /* 设置字体颜色，在父类中 */
&#125;
.header_left>div>span&#123;
    font-weight: bold;
    /* 设置字体加粗 */
&#125;

效果如下

图又无了

设置超链接：

<div >
    <a href="">
        <img src="" alt="" >
        核心产品
        <i></i>
    </a>
</div>

为了清除原有超链接丑不拉几的样式，css里面设置为

a&#123;
    text-decoration: none;
&#125;

这样去掉了下划线的样式

然后设置添加图片

html:

<body>
        <div id="header">
            <div class="header">
                <div class="header_left">
                    <div >
                        <span >
                            我是头部
                        </span>
                    </div>
                    <div >
                        <a href="">
                            <img src="./img/imag.png" alt="" >
                            核心产品
                            <i></i>
                        </a>
                    </div>

                </div>
                <div class="header_right">

                </div>
            </div>
        </div>
    </body>

css:

.header>div:nth-child(2)>a,.header_left>div:nth-child(2)>a>img,.header_left>div:nth-child(2)>a>i&#123;
    float: left;

&#125;
.header_left>div:nth-child(2)>a>img&#123;
    width: 17px;

&#125;

这里全部设置为浮动布局，并且调整了图片大小如图：

下面是给文字添加图标：

阿里图标库，找到想要的图标后

点击加入购物车
点击购物车添加到项目
点击项目更新代码

复制更新后的链接，引入到页面的css的link，这样：

<linkrel="stylesheet"type="text/css"href="//at.alicdn.com/t/font_2076021_pp0wtm9fh8j.css"/>

复制好想要的图标的代码后，如下(注意复制好代码后再标注iconfont才能显示出来)：

<div >
    <a href="">
        <img src="./img/imag.png" alt="" >
        核心产品
        <i class="icon-arrow-down iconfont"></i>
    </a>
</div>

取消i标签的浮动(不取消浮动i标签跑前面去)，并且修改超链接字体颜色：

去除样式的一篇参考blog:去除css中的默认样式

.header>div:nth-child(2)>a,.header_left>div:nth-child(2)>a>img,&#123;
    float: left;
    color:dimgrey;
&#125;
.header_left>div:nth-child(2)>a>img&#123;
    width: 17px;
&#125;
 a&#123;text-decoration: none;color:#333;&#125;
 a:hover, a:visited, a:link, a:active &#123;
    color:dimgrey;
    // 设置使所有a标签的四种状态都和本身颜色保持一致，样式代码自己写
&#125;

最终的效果图如下：

定位属性

接下来由于时间原因进行总结性概括，不再进行详细描述，反正csdn都能找到

相对定位

相对于div原有位置进行的定位，相对于自己

position:relative;
top:200px;
left:200;

会占有原有位置

绝对定位

绝对定位相对于整个大的div的右上角定位

position:absolute;
top:200px;
left:200;

不会占有原有位置

相对父容器的绝对定位

由于决定定位是全局的，若要设置局部绝对

父类（外层谁设置相对谁）的position设置为相对，或者absulute（非static默认

子类为absolute；

可以实现子类相对于父类的绝对定位

如果元素外层没有一个设置为定位，那么参考点就是body

固定定位

很多吧不随滚动条移动的效果就是用这个做出来的

视差网页也是这样

position:fixed;
right:200px;
top:200px;

堆叠顺序

z-index

一旦修改了元素的定位方式，则元素可能会发生堆叠
可以使用z-index属性来控制元素框出现的重叠顺序
z-index仅能在定位的元素上生效
z-index属性:
- 值为数值，数值越大表示堆叠顺序越高，即离用户越近
- 可以设置为负值，表示离用户更远，一般不要设置
- Z-index仅能在定位元素上奏效

比如当元素进行absolute定位产生堆叠的时候

写法如下：

z-index:1;
z-index:2;
z-index:3;

display属性

根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，称为块元素，而span元素的默认display属性值为“inline”，称为“行内”元素。

块元素与行元素是可以转换的，也就是说display的属性值可以由我们来改变

display常见属性值：

1. none:隐藏对象，体积同样消失，不占据原有位置
  - visibility：hidden同样可以隐藏，但是占据空间
  - opacity：50%设置透明度
  - 怎么隐藏怎么显示
2. inline:指定对象为内联元素在行内布局，没有宽高属性
3. block:指定对象为块元素独占一行
4. inline-block:指定对象为内联块元素让几个div在行内并列显示，有宽高属性
5. table-cell:指定对象作为表格单元格同上
6. flex:弹性盒

标准盒子模型

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。W3C组织建议把网页上元素看成是一个个盒子。盒模型主要定义四个区域:内容(content)内边距(padding)、边框(border)、外边距(margin)。转换到我们日常生活中，可以拿手机盒来对比，手机=内容，内边距=盒子中的填充物，边框-盒子的厚度，外边距两个手机盒之间的距离。

通常我们设置的宽和高是指“手机”content的宽高，一整个盒子还包含了“填充物”、盒子、盒子与盒子的距离

关系如图：

示意图

margin与padding的写法不再赘述；自己查csdn；

关于margin

利用margin可以设置块状元素居中
```
 margin:10px auto;
```
上下10px,内部居中
上下margin会合并无左右合并

比如上容器margin-bottom：150px；下容器margin-top=50px;但是这两者间距是150px，取最大值margin

浮动元素不合并；
包含式margin合并

子容器的margin并不会导致与父容器内部产生距离，而是会让父容器也有一个margin

建议父容器padding或者bottom;
margin可以负值

关于border

写法见csdn：宽度样式颜色
style（实线或者虚线）属性为空，边框不出现
style取值：
- 点：dotted
- 实线：solid
- 双线：double（需要三像素以上
- 虚线：dashed
- 无边框：none

关于padding

简写：
- padding :value(四个方向相同);
- padding: value(上下) value(左右);
- padding: value (上) value(左右)vadue(下);
- padding: value(上) value(右) value(下）value(左);
当内边距挤压子容器的时候，内边距会扩大外部容器，并不会覆盖子容器，border也是

所以容器原始大小设置因为padding与border改动,margin不会

怪异盒子模型

适配ie浏览器的盒子模型，

特点是padding与border不会改变盒子大小

其他不赘述

浏览器私有前缀

根据不同的浏览器内核，css前缀会有不同。最基本的浏览器内核有如下四种，其它的内核都是基于此四种进行再研发的。

1. Gecko内核前缀为-moz-火狐浏览器
2. Webkit内核前缀为-webkit-也叫谷歌内核，chrome浏览器最先开发使用，safari浏览器也使用,该内核。国内很多浏览器也使用了webkit内核，如360极速、世界之窗、猎豹等。
3. Trident内核前缀为-ms-也称IE内核
4. Presto内核前缀-o-目前只有opera采用

为了适配不同浏览器，如果写法是css3实验性阶段的语句，保险起见不但要吧所有浏览器前缀写一遍，还要再写一次原属性

但是如果都是css2标准就不用啦~~

圆角边框与阴影渐变

这里给出一个好用的圆角边框生成网站,以及参考blog：

懒癌专用

具体阴影调整写法

渐变设置

好了你已经学完了

hover应用之小标签实战

CSS部分：

#box&#123;
    /* border: 1px solid blue; */
    float: left;
    position: relative;
&#125;
/* 父容器设置相对定位,让子容器能对父容器定位 */
#box>div&#123;
    /* border: 1px solid green; */
    float: left;
    padding: 10px 20px;
    color: #fff;
    font-weight: bold;
&#125;
/* 每个头标签的基本配置 */
#box>div:first-child&#123;
    background-color: #009764;
&#125;
#box>div:nth-child(2)&#123;
    background-color:#da1941;
&#125;
#box>div:last-child&#123;
    background-color: #eab719;
&#125;
#box>div>div&#123;
    position: absolute;
/*     border: #DA1941 solid 1px; */
    top: 40px;
    left: 0px;
    padding: 20px;
    width: 205px;
    height: 80px;
    display: none;
&#125;
/* 先将块元素隐藏,absolu下标签会一个一个覆盖 */
#box>div:hover>div&#123;
    display: block;
&#125;
/* 当鼠标移到标签的时候,设置展示 */
#box>div:first-child>div&#123;
    background:linear-gradient(50deg,#009764,#009764);

&#125;
#box>div:nth-child(2)>div&#123;
    background:linear-gradient(50deg,#da1941,#da1941);
&#125;
#box>div:last-child>div&#123;
    background:linear-gradient(50deg,#eab719,#eab719);
&#125;

HTML部分：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>小标签</title>
        <link rel="stylesheet" type="text/css" href="./css/style.css"/>
        <!-- 这里引入css文件 -->
        <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2076021_pp0wtm9fh8j.css"/>
    </head>
    <body>
        <div id="box">
            <div >
                标签1
                <div >
                    标签1的内容
                </div>
            </div>
            <div >
                标签2
                <div>
                    标签2的内容
                </div>
            </div>
            <div >
                标签3
                <div>
                    标签3的内容
                </div>
            </div>
        </div>

    </body>
</html>

最后效果如图：

鼠标不触碰div