前端-CSS-6-盒子模型

上面的布局宽度
div{

            width: 200px;

            height: 200px;

            border: 10px solid red;

            padding: 20px;

        }

------------------------------------

    <!--

    padding: 就是内边距。 padding的区域是有背景颜色。并且背景颜色和内容区域颜色一样

    也就是说background-color这个属性将填充所有的border以内的区域

    就是边框到内容之间的距离

    padding有四个方向。所以说我们能分别描述4个方向的padding

    方法有两种：1.写小属性  2.写综合属性 用空格隔开

--------------------------------------------------------------------------------

.box{
   width: 300px;
   height: 300px;
   /*padding: 30px;*/
   background-color: red;
   /*border: 5px solid yellow;*/

   /*小属性设置*/
   /*padding-top: 30px;
   padding-right: 30px;
   padding-bottom: 30px;
   padding-left: 30px;*/

   /*综合属性设置，用空格隔开*/

   /*上 右 下 左*/
   /*padding: 20px 30px 40px 50px ;*/

   /* 三个值表示的时候 上20px  左右30px  下40px*/
   padding: 20px 30px 40px;

   /*两个值表示的时候：上下为20px   左右为30px*/
   /*padding: 20px 30px;*/

   /*一个值表示的时候   上下左右都是 20px*/
   /*padding: 20px;*/

------------------------------------------------------------------

一些标签默认有padding

那么我们一般在做站的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。

我们现在初学可以使用通配符选择器

*{

  padding:0;

  margin:0;

}

But，这种方法效率不高。

所以我们要使用并集选择器来选中页面中应有的标签（不用背，因为有人已经给咱们写好了这些清除默认的样式表，reset.css）

https://meyerweb.com/eric/tools/css/reset/

----------------------------------------------------------------------------

盒模型的属性

盒模型的属性

width：内容的宽度

height: 内容的高度

padding：内边距，边框到内容的距离

border: 边框，就是指的盒子的宽度

margin：外边距，盒子边框到附近最近盒子的距离

如果让你做一个宽高402*402的盒子，您如何来设计呢？

答案有上万种，甚至上一种。

-------------------------------------------------------

border: 边框，

border: 5px  solid  red;

border: 5px  solid  red;

border:边框的意思，描述盒子的边框

border:5px(粗细)  solid(线性样式) red(颜色)

边框有三个要素： 粗细 线性样式 颜色

border: solid

如果颜色不写，默认是黑色。如果粗细不写，不显示边框。如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。

按照3要素来写border

border-width: 3px;

border-style: solid;

border-color: red;

/*

border-width: 5px 10px;

border-style: solid dotted double dashed;

border-color: red green yellow;

*/

按照方向划分

border-top-width: 10px;

border-top-color: red;

border-top-style: solid;

border-right-width: 10px;

border-right-color: red;

border-right-style: solid;

border-bottom-width: 10px;

border-bottom-color: red;

border-bottom-style: solid;

border-left-width: 10px;

border-left-color: red;

border-left-style:solid;

上面12条语句，相当于 bordr: 10px solid red;

另外还可以这样：

border-top: 10px solid red;

border-right: 10px solid red;

border-bottom: 10px solid red;

border-left: 10px solid red;

清除边框的默认样式，比如input输入框

 border:none;

 border:0;

使用border来制作小三角

/*小三角 箭头指向下方*/

        div{

            width: 0;

            height: 0;
　　　　　　　border-top: 10px solid red;           top     上

            border-bottom: 20px solid red;        bottom  下

            border-left: 20px solid transparent;  left    左  透明色

            border-right: 20px solid transparent; right   右

        }

<body>
   <div></div>

</body>

-------------------------------------------------

margin

margin：外边距的意思。表示边框到最近盒子的距离。(兄弟之间)

/*表示四个方向的外边距离为20px*/

margin: 20px;

/*表示盒子向下移动了30px*/

margin-top: 30px;

/*表示盒子向右移动了50px*/

margin-left: 50px;

margin-bottom: 100px;

前端-CSS-6-盒子模型的更多相关文章

深入理解CSS系列（一）：理解CSS的盒子模型
接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...
这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）
这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...
使用css弹性盒子模型
提示: 当期内容不充实, 修改后再来看吧以下称:弹性子元素: 子元素, 弹性容器: 容器弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...
#CSS的盒子模型、元素类型
CSS的盒子模型.元素类型本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...
深入了解CSS中盒子模型
CSS中盒子模型介绍什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...
CSS 弹性盒子模型
CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...
前端开发HTML&css入门——盒子模型以及部分CSS样式
CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里.• 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.• 我们只需要将相应的盒子摆放到网页中相 ...
前端学习笔记--CSS布局--盒子模型
1.概述: 2.盒子模型 overflow属性: border属性: 1.padding属性: margin:
CSS样式----盒子模型（图文详解）
盒子模型盒子中的区域一个盒子中主要的属性就5个:width.height.padding.border.margin.如下: width:内容的宽度.CSS中 width 指的是内容的宽度,而不是 ...
认识CSS中盒子模型
前端之HTML,CSS(六) CSS 盒子模型 CSS中的重点,理解盒子模型对于CSS才能有更清晰的认识.网页说简单一点其实就是一块一块的拼接出来的,可以想象成拼图,所有图块拼接在一起就成了一幅图像. ...

随机推荐

.net 拆分字符串成数数组包含使用空格逗号回车换行符等
简单的代码如下: public static string[] GetProductList(string inputstring) { char[] split ...
spring4 知识点
1 bean的创建 1,直接在配置文件里面写一个带有@Bean注解的方法(返回值就是那个bena对象),(name等于方法名) 2,使用 FactoryBean 接口(三个方法分别是创建,类型,单 ...
Vue 介绍
1. 条件效果图. 如果seen为false,文字将消失 2. 循环 script里定义数据效果 3. 事件处理效果如下图, hello world被逆转了
【python】单下划线与双下划线的区别
Python 用下划线作为变量前缀和后缀指定特殊变量. _xxx 不能用'from moduleimport *'导入 __xxx__ 系统定义名字 __xxx 类中的私有变量名以单下划线开头(_f ...
php的zend引擎执行过程一
1. Zend引擎主要包含两个核心部分:编译.执行: 执行阶段主要用到的数据结构: opcode: php代码编译产生的zend虚拟机可识别的指令,php7有173个opcode,定义在 zend_v ...
vscode美化方法以及定制主题插件
首先是学会调整字体和字体大小换成你看着舒服的字体和字体大小,当然,通常情况下默认的就很好看,但每个人的显示屏参数不同显示起来的效果因人而异,如果你有更好的方案不妨设置一下下面展示我的浅色主题和深色 ...
1016 Phone Bills （25 分）
1016 Phone Bills (25 分) A long-distance telephone company charges its customers by the following rul ...
python&pandas 与mysql 连接
1. python 与mysql 连接及操作,直接上代码,简单直接高效: import MySQLdb try: conn = MySQLdb.connect(host='localhost',use ...
Unity的JIT和AOT实现
https://myhloli.com/about-il2cpp.html JIT方式: Unity的跨平台技术是通过一个Mono虚拟机实现的.而这个虚拟机更新太慢,不能很好地适应众多的平台. And ...
中国Linux开源镜像站大全
本文来源:各大开源软件.发行版镜像页面. 请注意这是一个总结,如果您自己搭建了一个小型开源镜像,这里并没有.以下列出的是包含大量不同镜像的站点. 具体配置中,我建议您使用大企业 ...