一.边框    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. 【开发工具】- Idea.2018.02注册码激活

    1.从下面地址下载一个jar包,名称是  JetbrainsCrack-3.1-release-enc.jar 下载地址: 链接: https://pan.baidu.com/s/1VZjklI3qh ...

  2. js判断数组中是否有重复元素

    方法一:正则 var ary = new Array("111","ff","222","aa","222&q ...

  3. 常用模块 - configparse模块

    一.简介 configparser模块在Python中是用来读取配置文件的,配置文件的格式跟windows下的ini配置文件相似,可以包含一个或多个节点(section),每个节可以有多个参数(键=值 ...

  4. jq+swiper 实现今日头条App的选项卡效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 数据分析 之 NumPy

    目录 简单了解数据分析 Python数据分析三剑客(Numpy,Pandas,Matplotlib) 简单使用np.array() 使用np的routines函数创建数组 ndarray N维数组对象 ...

  6. dedecms更换默认编辑器为百度编辑器ueditor

    由于体验过ueditor编辑器,再次使用Dedecms编辑器感觉很别扭,所以就有了更换编辑器的想法.操作顺序如下所述: 1.首先,下载ueditor包,官网http://ueditor.baidu.c ...

  7. Vue编程式跳转

    编程式跳转 <template> <ul class = "prolist"> <!-- //产品 --> <!-- :to = &quo ...

  8. Joomla漏洞复现

    漏洞环境及利用 Joomla 3.4.6 : https://downloads.joomla.org/it/cms/joomla3/3-4-6 PHP 版本: 5.5.38 Joomla 3.4 之 ...

  9. Node.js 实现 MySQL 数据库增删改查

    安装mysql $ npm isntall mysql 连接数据库 需要根据实际配置修改数据库用户名.及密码及数据库名 let mysql = require('mysql'); let connec ...

  10. linux下svn解决冲突

    1. 使用svn status + 文件路径+文件名 查看文件或目录的状态(该状态可自行进行百度),属性状态为'C'的表示,改文件或目录处于冲突状态 2. 使用svn resolve --accept ...