首页
学习
活动
专区
工具
TVP
发布

回炉重造八

border属性:

border-top/border-right/border-bottom/border-left

连写方式:

border:1px solid red;

上右下左的方式

border-width:1px 5px 6px 8px;

border-style:solid/dashed;(常用的两种,虚线和实线)

border-color:red;

注意点:

这三个属性的取值省略时的规律

上 右 下 左 > 上 右 下 > 左边的取值和右边的一样

上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样

上 右 下 左 > 上 > 右下左边取值和上边一样

同一个选择器中如果设置了多个边框属性, 后面的会覆盖前面的

内边距属性(padding):

书写格式与上面一样,注意点:

给标签设置内边距之后, 标签占有的

给标签设置内边距之后,

省略规律和border属性一样

外边距属性(margin):

书写格式与上面一样,注意点:

给标签设置外边距之后, 标签占有的

给标签设置外边距之后,

省略规律和border属性一样

外边距合并现象

默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的

快捷书写格式:

span.box$*3

我是span

我是span

我是span

span标签一开始是没有外边距的,看上去有外边距是因为字符实体的原因,打了回车或者多个空格,造成有一定的位置

内容宽高指的是就是通过width/height属性设置的宽度和高度

元素的宽高

宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框

高度 同理可证

元素空间的宽高指的是元素的宽高加上外边距的宽度和高度

box-sizing属性(重要)

CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变

box-sizing取值

content-box

元素的宽高 = 边框 + 内边距 + 内容宽高

border-box

元素的宽高 = width/height的宽高

增加padding和border之后要想保证盒子元素的宽高不变, 系统会自动减去一部分内容的宽度和高度

box-sizing中加了margin一样是换行的,所以说box-sizing不能保证元素空间的,能保证的是,元素的宽高和width/height一样

注意点:

如果两个盒子是嵌套关系,那么设置了里面一个盒子的顶部

的外边距看,外面的一个盒子也会被顶下来。

2.如果外面的盒子的盒子不想被一起定下来,那么可以给

外面的盒子添加边框属性。

3.在企业开发中,一般情况下如果需要控制嵌套关系盒子之间的距离,

应该首先考虑padding,其次在考虑margin,

margin本质上是用于控制兄弟关系之间的间隙的

在嵌套关系的盒子中,我们可以利用margin:0 auto;的方式来让里面的盒子在外面的盒子水平居中

2.margin:0 auto;只对水平方向有效,对垂直方向无效。

text-align:center;和margin:0 auto;区别、

text-alian只是设置文字和图片水平居中。

margin:0 auto;让盒子自己居中。

为什么要清空默认边距(外边距和内边距)

在企业开发中为了更好的控制盒子的宽度和计算盒子的宽高等等。

格式:

第一种方法

*{

margin:0;

padding0;

}

注意点

通配符选择器会找到当前界面中所有的标签,所以性能不好

在企业开发中可以从这个网址中拷贝

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td

行高和盒子高度不同!

--line-height:行高;height:盒子高;

行高:line-height:

默认情况下,文字在行高中默认垂直居中,

行高会撑高盒子,

在企业开发中,经常将 只要行高和盒子高一样,文字就会垂直居中。

--盒子中有多行文字,不能使用设置行高等于盒子高度,让文字垂直居中,只能通过padding来设置。

--前端经验:盒子中存储的文字,一般已盒子左边内边距为基准,不会已右边距为基准,右边距有误差,文字左边距是准确的,右边距一般不准。因为右边如果放不下一个文字,文字就会换行显示,所以文字和内边距间距离就会有误差。

顶部的内边距并不是边框到文字顶部的距离,而是边框到行高顶部的距离

网页布局方式:排版,浏览器对页面元素的排版。

排版方式:

1.标准流(文档流、普通流)流动式排版方式

css元素分为三类:块级,行内,行内块级;

块级元素就会垂直排版,行内元素和行内块级元素会水平排版

浮动流是一种“半”脱离标准流的排版方式。

浮动流只有一种排版方式(水平排版),它只能设置某个元素左对齐或者右对齐。

浮动于父元素的左边/右边.

注意:

1、浮动流中没有居中对齐,也就是没有center这个取值。

2、在浮动流中,是不可以使用martin:0 auto;来是元素居中的。

特点:

1、在浮动流中是不区分块级元素/行内元素/行内块元素的。无论是哪种,都可以水平排版。

2、在浮动流中,无论是块级元素/行内元素/行内块元素都可以设置宽和高。

3、综上所述,浮动流中的元素和标准流中的行内块元素很像,既可以水平排版又可以设置宽和高。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180718G1XGCS00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券