zoukankan      html  css  js  c++  java
  • 盒子模型

    编辑本博客

    盒子模型

    div{
         100px;
        height: 100px;
        padding: 10px;
        border: 1px solid red;
        margin: 10px;
    }
    View Code

    属性:

    • width:指内容宽度
    • heigth:指内容高度
    • padding:边框到内容之间的距离。可以分别设置4个方向的填充,有背景颜色,颜色和内容区域颜色一样,即background-color设定样式
    1. 小属性设置:
    2. 综合属性设置:顺时针方向,上、右、下、左
    • border:可通过三要素设置
    1. 粗细:默认为0
    2. 线性:只写solid线性,默认有3px的黑色宽度,dotted double  dashed
    3. 颜色:默认是黑色
    • margin:指距离,上下设置0,左右设置auto即可对齐居中显示
      margin:0 auto;

    盒模型计算

    清除某些标签默认padding属性

    ul有默认的margin、padding属性

    body默认有margin属性

    使用并集选择器清除

    reset css

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    View Code

    使用border属性制作三角形

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小三角</title>
        <style type="text/css">
            div{
                width: 0;
                height: 0;
                border-top:20px solid transparent;
                border-right: 20px solid transparent;
                border-bottom: 20px solid transparent;
                border-left: 20px solid green;
            }
        </style>
    </head>
    <body>
    <div></div>
    
    </body>
    </html>
    View Code

     标准文档流现象

    • 空白折叠现象,空白字符或空白行会折叠成一行或一个空格
    • 高矮不齐,底边对其
    • 一行显示不完自动换行
  • 相关阅读:
    idea 安装lombok 插件过程
    typora快捷键之速成笔记
    Android端抓取日志
    接口测试Case之面向页面对象编写及规范
    Jenkins + jmeter + ant + git 自动化集成
    自动化测试使用流程
    Jenkins git 的配置及问题解决
    传智springMVC笔记
    session 原理 数据结构
    Redis 3.0 集群搭建
  • 原文地址:https://www.cnblogs.com/yaya625202/p/9159013.html
Copyright © 2011-2022 走看看