复习CSS - 五

简介

  • 实际上这次涉及到一些ps 相关的知识点

PS 基本操作

  • PS基本操作:


    image.png

常规通用css

  • 大多数CSS都需要包含如下通用属性:
* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
li {
    list-style: none;
}
image.png

圆角矩形 border-radius

  • 比如 border-radius: 10px; 直接指定 px 或者用百分比均可,例如 : border-radius: 10%
    image.png
  • 实际上可以顺时针分别改变四个角的值:border-radius: 10px 20px 30px 40px
    image.png

盒子阴影 box-shadow

  • CSS 中新增盒子阴影,可以使用 box-shadow 属性进行设置。
  • 写法box-shadow: h-shadow v-shadow blur spread color inset ,inset 可以省略表示外阴影。
    image.png

文字阴影 text-shadow

  • 通过属性text-shadow: h v blur color
    image.png

浮动 (float)

  • 一个网页布局通常通过三种布局方式组成:标准流、浮动、定位
  • 浮动可以改变元素标签默认的排列的方式。
  • 多个块元素纵向排列用标准流,多个块级元素横向排列用浮动。


    image.png

    image.png

浮动的特性(脱标)

  • 1、浮动元素会脱离标准流(脱标)
  • 2、浮动的元素会一行内显示并且元素顶部对齐。
  • 3、浮动的元素会具有行内块元素的特性。(也就是说如果给span加上float,那么他就变成行内块的特性了。)
  • 浮动经常和标准流的父级元素配合使用。

常见的网页布局

  • 基础性


    image.png
  • 常规形


    image.png
  • 通过标准流和浮动实现下面的例子(不能用flex,或者grid)


    image.png
  • 实现参考代码:
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .header {
            background-color: darkgrey;
            height: 45px;
        }
        .content {
            width: 800px;
            /*background-color: pink;*/
            margin: 0 auto;
        }
        .footer {
            background-color: darkgrey;
            height: 100px;
        }

        .banner {
            margin-top: 16px;
            height: 150px;
            background-color: gray;
        }

        .product-list {
            height: 100px;
            margin-top: 16px;
        }

        .detail-list {
            height: 200px;
            margin-top: 16px;
            margin-bottom: 16px;
        }

        .product-list li,.detail-list li {
            float: left;
            margin-right: 16px;
            width: 188px;
            height: 100px;
            background-color: purple;
        }
        .product-list .last,.detail-list .last {
            margin-right: 0;
        }

        .detail-list li {
            height: 200px;
        }
    </style>
</head>
<body>
<div class="header">Header</div>
<div class="content">
    <div class="banner">Banner</div>
    <div class="product-list">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="detail-list">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
</div>
<div class="footer">Footer</div>
</body>
</html>
  • 浮动只会压住后面的标准流,而不影响之前的标准流。

为什么清除浮动

  • 由于父级盒子很多情况下,不方便给高度,但是子盒子又不占有位置,最后父级盒子高度为0时,就会影响下面标准流的盒子。


    image.png
  • 清除浮动


    image.png
  • 清除浮动的四种方法


    image.png

清除浮动的额外标签法,也成为隔墙法(W3C推荐)

  • 额外标签法会在浮动元素末尾添加一个空的标签,例如:<div style="clear: both"></div>
    image.png

清除浮动的 overflow 法。

  • 找到父级元素添加overflow: hidden 即可。
    image.png

清除浮动的 :after 伪元素法

  • 给父元素添加:after 伪类并写入如下代码:


    image.png
  • 测试代码如下:
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .header {
            background-color: darkgrey;
        }

        .footer {
            background-color: peru;
            height: 100px;
        }
        .cell {
            float: left;
            height: 50px;
            width: 50px;
            background-color: gold;
            border: 1px solid red;
        }

        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear:both;
            visibility: hidden;
        }
        .clearfix {
            *zoom: 1 ;
        }

    </style>
</head>
<body>
<div class="header clearfix">
    <div class="cell">Cell1</div>
    <div class="cell">Cell2</div>
    <div class="cell">Cell3</div>
</div>
<div class="footer">Footer</div>
</body>
</html>
  • 原理上类似额外标签法,优点是不会影响原有标签结构。
  • 缺点是需要照顾低版本浏览器,大厂都会参考这种方法,是一种高级的处理方式。

双伪元素清除浮动

  • 闭合浮动的精髓就是赌门,那么最好的方式就是前后都堵门,也就是双伪元素清除浮动。


    image.png
  • 详情:


    image.png
  • 测试代码:(clearfix 注意需要应用到父元素中)
<style>
       .clearfix:before, .clearfix:after {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear:both;
        }
        .clearfix {
            *zoom: 1 ;
        }
</style>

结束

  • 感谢阅读

推荐阅读更多精彩内容

  • 双飞翼布局 什么是双飞翼布局呢? 事实上,圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局,两边的盒子宽度...
    tency小七阅读 115评论 0 0
  • CSS Cascading (层叠) Style (样式) Sheets(表) 页面导入样式时,使用link和@i...
    我没叫阿阅读 547评论 2 3
  • HTML5 基本板式 div 块级标签,内容显示默认独占一行 示例 作用 div在开发过程中一般充当网站的结构,用...
    山高路远_海深不蓝阅读 114评论 0 1
  • 前言 本文整理出来,是方便自己后期复习和学习,有一些自己个人总结,是本人现在的见解,可能有所不足,有问题欢迎指正。...
    lazy_tomato阅读 182评论 0 0
  • 这篇文字里我会介绍50 个便于使用的 CSS2/CSS3 代码片段给所有的WEB专业人员. 选择IDE开发环境来存...
    JamHsiao_aaa4阅读 490评论 0 3