前端 - CSS

菜鸟_渣渣辉
104 阅读2分钟

CSS实现一个三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            width: 0;
            height: 0;
            border-width: 10px;
            border-style: solid;
            border-color: transparent red transparent transparent;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
</html>

flex布局实现盒子居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .app{
            width: 500px;
            height: 500px;
            background: yellow;

            /* flex布局 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box{
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="app">
        <div class="box"></div>
    </div>
</body>
</html>

绝对定位实现盒子居中1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .app{
            width: 200px;
            height: 200px;
            background: yellow;

            /* 绝对定位 */
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="app"></div>
</body>
</html>

绝对定位实现盒子居中2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .app{
            width: 300px;
            height: 300px;
            background: blue;

            /* 绝对定位 */
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -150px;
        }
    </style>
</head>
<body>
    <div class="app"></div>
</body>
</html>

绝对定位实现盒子居中3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .app{
            width: 200px;
            height: 200px;
            background: pink;

            /* 绝对定位 */
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="app"></div>
</body>
</html>

移动端百分比布局

(function(){
      function change(){
          document.documentElement.style.fontSize = document.documentElement.clientWidth*100/750+"px";
      }
      window.onresize = change;//window.onresize：当屏幕的窗口大小发生改变，就会触发onresize事件
      change();
})();

CSS优先级原则

！important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 * > 继承 > 浏览器默认属性

脱离文档流的元素

  • 浮动 float:left / right
  • 绝对定位 position: absolute
  • 固定定位 position: fixed

让元素消失的方法

  • display: none
  • visibility: hidden
  • opacity: 0 (控制透明度）
  • z-index （控制层级，定位元素）
  • 宽、高都为0

清除浮动的方法

  • 1.伪类清除浮动
    • “最完整的clearfix清除浮动的方法”
//在CSS中添加 :after 伪元素
.clearfix:after{
    /* 设置添加子元素的内容是空 */
    content:'';
    /* 设置添加子元素为块级元素 */
    display:block;
    /* 设置clear:both */
    clear:both;
    width:0;
    /* 设置添加的子元素高度为0 */
    height:0;
    line-height:0;
    font-size:0;
    /* 设置添加子元素看不见 */
    visibility:hidden;
    overflow:hidden;
}
.clearfix{
    zoom:1;
}
  • 2.给父级元素添加 overflow：hidden （超出隐藏）
  • 3.给父级元素设置固定的高度

标准W3C盒模型和IE盒模型

标准W3C盒模型

  • 元素的实际宽度 = width + padding-left/right + border-left/right
  • 元素的实际高度 = height + padding-top/bottom + border-top/bottom

IE盒模型

  • box-sizing: content-box 此属性表现为标准模式下的盒模型
  • box-sizing: border-box 此属性表现为怪异模式下的盒模型

HTML5和CSS3的新增属性

HTML5

  • H5 中
    • header、nav、canvas定义图片、video视频、audio音频、footer页尾
  • input 中
    • tel电话、emali邮件、number、color、file文件选择框，search搜索框
  • form 中
    • placeholder 框里不输入东西会弹出提示
    • autofoucs 自动获取焦点

CSS3

  • border-radius 圆角
  • box-shadow 阴影
  • border-image 边框图片
  • text-shadow 文字阴影
  • transform:
    • translate 位移
    • rotate 旋转
    • scale 缩放
  • box-sizing 父级宽高不变，内容随便折腾
avatar
文章
阅读
粉丝