css盒模型

css盒模型是css的基石,盒模型由content(主体内容),padding(补白,填充),border(边框),margin(外间距);

1.content:

width:数值+单位; 主体内容的宽度

height:数值+单位; 主体内容的高度

2.padding(补白或填充):

(a)padding:10px; 设置一个值,代表上,下,左,右均为10px

(b)padding:20px 10px; 设置两个值,代表上下为20px,左右为10px

(c)padding:20px 10px 5px;设置3个值,代表上为20px,左右为10px,下为5px

(d)padding:20px 10px 5px 0;设置4个值,顺时针依次为:上20px,右10px,下5px,左为0

可以单独设置某一个方向的padding值

padding-left:20px;(left可更改为right,top,bottom)

注:I.padding 不允许设置负值

II.背景可以延伸到padding区域

III.当我们需要调整子元素在父元素中的位置关系时,padding给父元素加

IV.当给元素设置padding后,要在原来的宽高上减去设置的padding值,保证总宽高不变

3.border(边框)

a)边框类型

border-style:solid(实线)|dashed(虚线)|dotted(点线)|double(双线);

b)边框颜色

border-color:颜色值;

c)边框宽度

border-width:数值+单位; (常用)

border-width:thin|medium|thick;

d)边框简写方式

border:线型 宽度 颜色;

e)单独设置某一个方向的边框

border-top:5px solid gray;(top可更改为left,right,bottom)

注:I.背景可以延伸到border区域,当边框为实线时,背景会被遮挡

II.当给元素设置边框时,也会占据一定的宽度和高度,要在原来的宽高上减去设置的border值,保证总宽高不变

border-left-color:transparent; (transparent代表透明)

4.外间距(margin)

margin值设置方式同padding

注:a)背景不能延伸到margin区域(margin区域背景不可见)

b)margin可以设置负值

c) 当左右margin值设为auto时,可以使定宽块状元素水平居中显示

d)调整本元素与其他元素之间的位置关系时,给本元素添加margin值

标准盒模型的总宽度=width+左右padding+左右border+左右margin

标准盒模型的总高度=height+上下padding+上下border+上下margin

前端之CSS盒模型介绍的更多相关文章

  1. 前端--关于CSS盒模型

    CSS样式规则的学习是很繁琐和枯燥的,因为它不像物理.数学或者其他编程语言一样有一些基本概念.有一些基本公理或者规则,其他所有的表现都是概念在这些公里或者规则之下的逻辑游戏,CSS是有一些基本概念,但 ...

  2. 2017年总结的前端文章——CSS盒模型详解

    CSS的盒模型是CSS的基础,同时也是难点,这个问题经常在面试中会被问到,属于经典问题了.很多博客里讲得也很模糊不清,于是,我在这里重新整理一下. 可以认为每个html标签都是一个方块,然后这个方块又 ...

  3. 每日分享!介绍Css 盒模型!

    如何定义盒模型: 在CSS盒子模型理论中,页面中所有的元素都是看成一个盒子,并且还占据一定的空间. 一个页面是由很多这样的盒子组成的.这些盒子之间都会相会影响,因此我们掌握CSS盒模型相当重要.需要理 ...

  4. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

  5. 【前端盲点】DOM事件流论证CSS盒模型是否具有厚度

    前言 很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? ...

  6. CSS盒模型属性详细介绍

    一.概述 CSS盒模型是定义元素周围的间隔.尺寸.外边距.边框以及文本内容和边框之间内边距的一组属性的集合. 示例代码: <!DOCTYPE html> <html lang=&qu ...

  7. 从零开始学习前端开发 — 3、CSS盒模型

    ★  css盒模型是css的基石,每个html标签都可以看作是一个盒模型. css盒模型是由内容(content),补白或填充(padding),边框(border),外边距(margin)四部分组成 ...

  8. HTML和CSS前端教程05-CSS盒模型

    目录 1. CSS盒模型 1.1 元素的尺寸 1.2. 元素内边距 padding 1.3. 元素外边距 margin 1.4. 处理溢出overflow 1.5. 元素的可见性Visibility ...

  9. CSS盒模型的介绍

    CSS盒模型的概念与分类      CSS盒模型就是一个盒子,封装周围的HTML元素,它包括内容content.边框border.内边距padding.外边距margin. CSS盒模型分为标准模型和 ...

随机推荐

  1. Watir RAutomation VS AutoIt to deal with popup

    Watir使用过程中,经常遇到的弹出框分为几类: 1. Alert 2. Confirm 3. Prompt 4. File select Watir 处理弹出框,有很多方法,可以应用 AutoIt来 ...

  2. openstack封装镜像

    1.准备工作:准备你想要封装的各种镜像的iso,完整版本最简单版本都ok,只要能出虚拟机就行,这个大家去官网下载自己要的iso就可以,我这里用centos6.4最简版本,因为分给我的活让做这个的... ...

  3. Python之线程与GIL

    前言            以下内容是个人学习之后的感悟,转载请注明出处~ 线程是什么 线程是程序中一个单一的顺序控制流程.进程内一个相对独立的.可调度的执行单元,是系统独立调度和分派CPU的 基本单 ...

  4. unity3D +php +数据库

    本文只是自己学习 摘录网上前人的学习资料,并非自己写的!!!!!!最近有项目需要用到数据库,网上有不少资料,但是整理后发现,那些资料对于完全没有PHP+MySQL经验的人来说还是很难理解,所以分享一下 ...

  5. Linux编写Shell脚本入门

    一. 一般编写shell需要分3个步骤 1. 新建一个脚本文件,并编写程序 vi hello.sh #!/bin/bash #注释 #输出 printf '%s\n' "Hello Worl ...

  6. 2.9-2.10 hive中常见查询

    一.查询语句 https://cwiki.apache.org/confluence/display/Hive/LanguageManual+Select 1.select语法 SELECT [ALL ...

  7. POJ - 1321 棋盘问题 dfs分层搜索(n皇后变式)

    棋盘问题 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 47960   Accepted: 23210 Descriptio ...

  8. react-redux升级到7.0.x后报错"TypeError: Object(...) is not a function"

    同样一套代码,react-redux 6.0.x 的版本下可以正常运行,在7.0.x的版本下出现报错,而且报错原因实在太难定位了 package.json { ... "react-redu ...

  9. 利用YYLabel 进行图文混排+高度计算

    利用YYLabel 进行图文混排+高度计算 1.项目需求: 用一个控件显示图片和文字,并且依据图片和文字动态计算控件的高度. 2.方案: 利用YYLabel控件和属性字符串处理. 注:(在使用YYLa ...

  10. 阿里云物联网 .NET Core 客户端 | CZGL.AliIoTClient:1. 连接阿里云物联网

    文档目录: 说明 1. 连接阿里云物联网 2. IoT 客户端 3. 订阅Topic与响应Topic 4. 设备上报属性 4.1 上报位置信息 5. 设置设备属性 6. 设备事件上报 7. 服务调用 ...