一.边框    1.边框颜色     border-color 边框颜色(可以设置上边框,如:border-top-color,也可以整体设置,但是要注意顺序)     2.边框粗细     border-width 边框粗细(可以设置上边框,如:border-top-width,也可以整体设置,但是要注意顺序)     2.边框样式     border-style 边框样式(可以设置上边框,如:border-top-style,也可以整体设置,但是要注意顺序)    二.外边距  1.margin   盒子距离浏览器的距离  (可以设置上外边距,如:margin-top,也可以整体设置,但是要注意顺序)    2.居中 margin: 0px auto

三.内边距   1.padding   内容到盒子的距离  (可以设置上内边距,如:padding-top,也可以整体设置,但是要注意顺序)

四.盒子模型的尺寸    尺寸默认:padding+margin+wigth+border    box-sizing 方便计算盒子模型尺寸(默认为content-box,border-box代表随着内容的宽度高度变化而变化)

五.圆角    border-radius 圆角(左上,右上,右下,左下)  /*如果想要一个圆,那么必须满足宽和高一致,圆角取宽度或者高度的二分之一*/  /*如果想要半圆,那么必须满足宽是高的2倍,圆角取宽度的二分之一*/  /*如果想要四分之一圆,那么必须满足宽和高相等,圆角取宽度相等值*/   六.盒子阴影  box-shadow 默认为外阴影,内阴影为inset  box-shadow: 5px -5px 20px black;

HTML盒子模型冷知识!!!的更多相关文章

  1. 关于js盒子模型的知识梳理

    盒子模型 JS盒子模型中的13个常用属性: clientWidth/clientHeight:可视区域的宽高,宽高+PADDING组成 clientTop/clientLeft:上边框和左边框的宽度 ...

  2. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  3. CSS学习篇核心之——盒子模型

    概述 关于CSS的一些基础知识我们在前面文章中已经有所了解,这篇文章我们主要来学习下CSS中的核心知识盒子模型的知识. 盒子模型 元素框的最内部分是实际的内容(element),直接包围内容的是内边距 ...

  4. css 盒子模型理解

    盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...

  5. 盒子模型的overflow属性,border属性,padding与margin属性

    今天要写的是CSS布局—盒子模型 首先说一下CSS的整体布局: 它包括容器(container),页眉(header),导航条(navbar),页面主要内容(main),菜单(menu),主要内容(c ...

  6. HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用

    文章目录 1.CSS基础知识 2.css样式 2.1.代码: 2.2 测试结果 3.CSS的语法 3.1 代码 4.块元素和行内元素 4.1 代码 4.2 测试结果 5.常用的选择器 5.1 代码块 ...

  7. CSS基础知识(颜色、伪类、盒子模型)

    6.设置颜色单位 L    普通英文单词 {color : 属性值red;} 此方法简单,便捷.但设置的颜色在不同浏览器中,可能显示的颜色出现差异 * 三原色 - 红.绿.蓝 L   颜色的八进制方式 ...

  8. padding标准盒模型和怪异盒子模型

    我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...

  9. CSS盒子模型与box-sizing

    今天在学习的时候偶然看到一张图片: 我瞬间瞪大了眼睛:width和height竟然不包括padding和border!! 过去所学知识有问题!在我的印象里,width应该是包含padding和bord ...

随机推荐

  1. 如何在一个Docker中同时运行多个程序进程?

    我们都知道Docker容器的哲学是一个Docker容器只运行一个进程,但是有时候我们就是需要在一个Docker容器中运行多个进程 那么基本思路是在Dockerfile 的CMD 或者 ENTRYPOI ...

  2. python学习之os模块

    1 window下的路径分隔符和mac上的一样吗 在win下用\做路径分隔符,mac里用/ 2.如何查看当前工作目录 import os os.getcwd() 3.如何切换当前工作目录 import ...

  3. Windows下MongoDB的下载安装、环境配置

    下载MongoDB 1.进入MongoDB官网,Products -> 选择SOFTWARE下的MongoDB Server 2.选择下载最新版 3.选择对应的版本下载 msi安装包形式安装Mo ...

  4. day 19 作业

    今日作业 1.什么是对象?什么是类? 对象是特征与技能的结合体,类是一系列对象相同的特征与技能的结合体 2.绑定方法的有什么特点 由对象来调用称之为对象的绑定方法,不同的对象调用该绑定方法,则会将不同 ...

  5. form组件 初始化

    class MyForm(Form): user = fields.ChoiceField( # choices=((1, '上海'), (2, '北京'),), initial=2, widget= ...

  6. tomcat redis session共享

    编译redis所需要的序列化包 安装 gradle Linux & MacOS users Configure your PATH environment variable to includ ...

  7. 安装lamp服务器

    1.安装http: $ yum install httpd 2.启动http: $ systemctl start httpd 3.访问:http://192.168.1.100 4.Installi ...

  8. spring cloud (三) 路由 zuul

    1 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...

  9. Caused by SSLError("Can’t connect to HTTPS URL because the SSL module is not available)

    window7系统: 今天刚安装的anaconda(开源的Python包管理器),把原来的python3和python2都给卸载了,结果运行爬虫程序的时候报错: Caused by SSLError( ...

  10. 正式一点的my.cnf文件

    感觉比以前的文件,配置正式了一些. 留照. [client] port #socket=/mysql/mysql.sock default-character-set=utf8 [mysqld] po ...