边框的css属性 盒子模型

Border 边框 css属性

边框颜色 border-color:red/#ffffff/rgb() 默认为黑色

边框样式 border-style:solid(实线)dashed(虚线) 默认为none

边框粗细 border-width:1px;默认是3px

Border的简写 border:border-width border -style border-color;

Div 块 盒子

1.就是标签名 没有特殊的标签属性

2.主要用来排版布局

3.宽度是100%,chrome浏览器默认有8px的外边距,清除这8px用

4.这种天生占用宽度为100%的标签我们把它叫块级元素

比如 div p h1-h6 ul ol li等等

特点: 独占一行 可以设置宽高。

5.大小宽高不是100%,是按照内容的多少决定大小的,这种标签叫内敛元素(行级元素)

比如 a span

特点:不独占一行 不可以设置宽高。

块级元素div分析

  1. 外边距margin
  2. 内边距 padding
  3. 边框 border

Div的真实宽度=width+margin-left+margin-right+border*2+padding-left+padding-right;

文档流

元素从上到下(主要说块级元素),从左到右(主要说行级元素)的一种排列方式,我们把它叫标准文档流。他是浏览器天生具有的一种功能。

在实际开发中,我们在遵循文档流原则的情况下,还得脱离文档流的约束,让元素不受文档流的控制。

  1. 脱离文档流的方法

给元素设置浮动float:left/right;

给谁设置这个属性,谁脱离文档流,就不受浏览器控制,就相当于把这个元素在浏览器空间移除了,剩下的空间,后面的元素就会去填补上。

A:

li设置了浮动,脱离了文档流,浏览器移除li占用的空间,ul就不会被撑起了所以高度为0

原文地址:https://www.cnblogs.com/wanglei2/p/11902379.html

时间: 2024-10-29 22:31:17

边框的css属性 盒子模型的相关文章

CSS之盒子模型与面向对象

从接触B/S到今天才三天,学习了二十几集的牛腩,在web设计的时候学到了CSS的盒子模型,感觉这个东西是真的好,一个简单的盒子理论就把一个网页设计的全部概括了,简直是抽象的一个杰出代表,这里就把自己对盒子的认识写出来,看完后相信大家会觉得盒子其实也就那么回事. 什么叫盒子 说到盒子,鞋盒,饭盒,总之是装东西的东西,所以在web中,他也是指装东西的一个容器. 盒子和OOP的比较 说道web盒子,我们先给大家一些名词:内容(content).填充(padding).边框(border).边界(mar

从条纹边框的实现谈盒子模型

类似下面这个图形,只使用一个标签,可以有多少种实现方式: 假设我们的单标签为 div: 1 <div></div> 定义如下通用 CSS: 1 2 3 4 5 div{     position:relative;     width: 180px;     height: 180px; } 这一题主要考查的是盒子模型 Box Model 与 背景 background 的关系,以及使用 background-clip 改变背景的填充方式. background 在 Box Mod

深入理解CSS系列(一):理解CSS的盒子模型

接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森破罢了.如果真的那么简单,为什么经常会遇到一些奇怪的样式问题,而要折腾好长时间呢?就是因为无从下手,终究还是基础不扎实啊!最近打算深入的学习一下CSS,以便遇到问题时,才知道如何下手,从而迅速的对症下药."深入理解"只是相对于我个人而言的哈,如果有大神觉得不够深入,请不喜勿喷.这是深入理解

深入了解CSS中盒子模型

原文:深入了解CSS中盒子模型 CSS中盒子模型介绍# 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什么组成的呢?有内容.内边距.边框.外边距. CSS中盒子的主要属性有5种如:width宽度.height高度.padding内边距.border边框.margin外边距. CSS中盒子模型实践# CSS中盒子模型实践,给大家看看我们CSS中的盒子长什么样. 代码块

这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)

这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置.设置背景.数据列表) 这些HTML.CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作.构建表单) 这些HTML.CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作.代码编写规则)

CSS弹性盒子模型

<!-- # 用于学习css弹性盒子模型 - 是一种一维的布局模型.给flexbox的子元素之间提供了强大的空间分布和对齐能力 - display:flex 设置为弹性盒子 - flexbox内flex元素的默认属性 - 元素排列为一行 (flex-direction 属性的初始值是 row). - 元素从主轴的起始线开始. - 元素不会在主维度方向拉伸,但是可以缩小. - 元素被拉伸来填充交叉轴大小. - flex-basis 属性为 auto. - flex-wrap 属性为 nowrap.

总结css表格,边框,轮廓,盒子模型,边距

css表格:border-collapse     是否把表格边框合并为单一边框 separate/collapse.border-spacing     设置分隔单元格边框的距离 num.caption-side     表格标题的位置 Top/bottom.empty-cells     设置是否显示表格中的空单元格 hide/show.table-layout     设置显示单元.行和列的算法.automatic: 列宽度由单元格内容设定默认.fixed: 列宽由表格宽度和列宽度设定.i

前端入门之CCS 2 选择器优先级,调节标签样式,字体属性,文本属性,背景, 边框,画圆,display属性,盒子模型,浮动(clear属性),溢出属性,定位,z-index,透明度

选择器的优先级问题 1.选择器相同 就近原则 2.选择器不同 行内 > id选择器 > 类选择器 > 标签选择器 除此之外还可以通过添加 !important方式来强制让样式生效,但并不推荐使用.因为如果过多的使用!important会使样式文件混乱不易维护. 万不得已可以使用!important <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

[ css 弹性盒子模型 box-flex 及相关属性 ] box-flex属性弹性盒子模型讲解及实例演示

box-flex属性(和谐版) 有道桌面词典显示,”flex”一词中文有“收缩”之意.不过,从此属性实际上产生的效果来看,无论怎样用“收缩”一词解释都显得很牵强.所以,这里,直接抛开字面意思,我们可以将”box-flex”理解为”房子-分配”.box为“盒子”的意思,我们可以理解为当下价格巨高的“房子”,”flex”指兄弟几个“分配房子”. 举个更实际点的例子:马林大叔省吃俭用一辈子,终于在上海郊外买了间150平米的商品房.后来,马林大叔想回老家养老,决定把房子分配给他的三个儿子.ok,先暂停下