文档章节

CSS盒子模型

s
 studywin
发布于 10/14 00:03
字数 1007
阅读 23
收藏 0

CSS盒子模型

        组成: content --> padding --> border --> margin

          像现实生活中的快递: 物品 --> 填充物 --> 包装盒 --> 盒子与盒子之间的间距

           content :width、height组成的  内容区域

            padding: 内边距(内填充) padding-top|right|bottom|left

                        number:30px   表示上下左右

                        30px 40px;    表示上下、左右

                        10px 20px 30px 40px  (上、右、下,左)

            margin:   外边距(外填充)

            

 

box-sizing

        box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。取值为content-box(默认值)|border-box。盒尺寸,可以改变盒子模型的展示形态(border-box),使得整个盒子(content、padding、border)并没有变大。说白了,就是 wieth、height相对谁,默认是针对content,取值为 border-box就相对margin以内的。

 

margin叠加

        当给两个盒子同时添加上下外边距的时候,就会出现叠加的问题。这个问题,只在上下有,左右是没有这个叠加问题的,取较大的值。(只给一个元素添加外边距)

 

margin传递

        margin传递的问题只会出现在嵌套的结构中,且只有margin-top会有传递的问题,其它三个方向是没有传递问题的。

    解决方案:给父元素加边框

                    给父元素加padding-top

 

margin自适应居中

        margin左右自适应是可以的,但上下自适应是不行的。margin:0 auto;

 

width、height不设置时

        对盒子模型的影响,会自动去计算容器的大小,节省代码。

 

标签的划分

        按类型划分:

                block: 块      div、p、ul、li、h1 ......

                                    特性:独占一行,支持所有样式,不写宽时跟父元素宽度相同,所占区域是一个矩形

                inline: 内联    span  a    em    strong    img   ...

                                    特性:挨在一起,有些样式不支持(width,height,margin,padding),不写宽度时由内容决定

                                                所占区域不一定是矩形

                                                内联标签之间会有空隙,原因换行产生的

                        注:布局一般用块标签,文字修饰一般用内联标签

                        解决内联元素之间有空隙的问题:给父元素加样式{font-size:0px;},给内联元素加上{font-size:16px;}

                inline-block:内联块    input    select    ...

                                        特性:挨在一起,支持宽高

        按内容划分

                                

                https://www.w3.org/TR/html5/dom.html   

        按显示划分

                替换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容。img、input ......

                非替换元素:将内容直接告诉浏览器,将其显示出来。div、h1、p、......

 

显示框类型

        display

                block    inline    inline-block    none

                注:display:none 与 visibility:hidden的区别

                        display: none 不占空间的隐藏

                         visibility: hidden占空间的隐藏

 

标签嵌套规范

        ul li

        dl dt dd

        table tr td

        块标签可以嵌套内联标签

        块标签不一定能嵌套块标签 <p><div></div></p>错误写法

        内联是不能嵌套块标签 <span><div></div></span>错误写法

        <a href="#"><div></div></a> 这样是可以的

        a标签是不可以嵌套a标签的

 

溢出隐藏

        overflow|overflow-x|overflow-y

                visible:默认

                hidden

                scroll

                auto

 

透明度与手势

        opacity: 0-1(0透明,0.5半透明,1不透明),占空间,所有的子内容也会透明。

        rgba:  (0-255,0-255,0-255,0-1)背景透明

        cursor:  手势

                        default 默认箭头

                        pointer  手形

                        move  移动

                        help  帮助

            自字义手势:

                                准备图片: .cur   .ico

                                 cursor:url(),auto;

 

最大、最小宽高

        min-width    max-width

        min-height    max-height

        注:强化对百分比单位的理解

 

CSS默认样式

        有些标签有默认样式,有些标签没有默认样式。

        没有默认样式    div span ...

        有默认样式 

                body    h1...h6    p    ul    ...

 

CSS重置样式

        *{ margin:0;padding:0; }

        ul{ list-style:none; }

        a{ text-decoration:none;color:#666; }

        img{ display:block; }

        默认图片与父容器的下边框会有间隙{ vertical-align:baseline; },清除间隙 img{ vertical-align:bottom; }

        链接:https://blog.csdn.net/brain_bo/article/details/81560444

 

 

                        

       

            

 

 

               

                

 

 

 

 

 

 

 

 

 

                        

© 著作权归作者所有

上一篇: photoshop简单使用
下一篇: CSS基础
s
粉丝 0
博文 9
码字总数 7762
作品 0
深圳
私信 提问
盒子模型的理解

概述 网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性。 这些属性我们可以把它转移到我们日常生活中的盒...

名字已被取
2016/03/14
60
0
DIV+CSS盒子模型

CSS盒子模型-什么是CSS盒子模型。 认识日常生活中盒子: 常常我们遇到盒子是用于可装东西长方形、正方形的盒子。如装皮鞋盒子、装电视机盒子,这个是比较具体的盒子。 CSS盒子: 根据字面我们...

晨曦之光
2012/04/24
144
0
CSS 盒子模型 Box Model

CSS 盒子模型概述 element : 元素。 padding : 内边距,也有资料将其翻译为填充。 border : 边框。 margin : 外边距,也有资料将其翻译为空白或空白边。 盒子模型有两种,分别是 IE 盒子模型...

ivon_lee
2014/04/19
330
1
【Hello CSS】第二章-CSS的逻辑属性与盒子模型

首发:krisachan.github.io 作者:陈大鱼头 github: KRISACHAN 在上一篇的第一章CSS的语法与工作流中介绍了的语法规则以及基本的渲染流程。本篇则会分享的逻辑属性以及盒子模型。 首先开篇之...

陈大鱼头
03/06
0
0
前端进阶之什么是BFC?BFC的原理是什么?如何创建BFC?

作者:陈大鱼头 github: KRISACHAN 链接:github.com/YvetteLau/S… 背景:最近高级前端工程师 刘小夕 在 github 上开了个每个工作日布一个前端相关题的 repo,怀着学习的心态我也参与其中,...

陈大鱼头
05/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

BigDecimal 去后面无用的0的方法

BigDecimal a=new BigDecimal("0.1000"); System.out.println(a.stripTrailingZeros().toPlainString());...

xiaodong16
12分钟前
4
0
JAVA--高级基础开发

[集合版双色球] 十二、双色球规则:双色球每注投注号码由6个红色球号码和1个蓝色球号码组成。红色球号码从1—33中选择;蓝色球号码从1—16中选择;请随机生成一注双色球号码。(要求同色号码...

李文杰-yaya
昨天
13
0
聊聊rocketmq broker的CONSUMER_SEND_MSG_BACK

序 本文主要研究一下rocketmq broker的CONSUMER_SEND_MSG_BACK CONSUMER_SEND_MSG_BACK rocketmq/common/src/main/java/org/apache/rocketmq/common/protocol/RequestCode.java public class......

go4it
昨天
3
0
API常见接口(下)

system类 StringBuilder和StringBuffer 包装类 1.System类 (java.lang包中) 提供了大量的静态方法,可以获取与系统相关的信息或系统级操作。 常用方法: public static long currentTimeMi...

Firefly-
昨天
4
0
MySQL系列:一句SQL,MySQL是怎么工作的?

对于MySQL而言,其实分为客户端与服务端。 服务端,就是MySQL应用,当我们使用net start mysql命令启动的服务,其实就是启动了MySQL的服务端。 客户端,负责发送请求到服务端并从服务端获取数...

杨小格子
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部