首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

前端基础-CSS尺寸与属性

九、css尺寸、属性 1.尺寸属性 a) 宽度 语法:width:值 取值:数字 + px/百分比/em -------------------------px代表像素,百分比代表浏览器宽度的百分比...注意:1.div设置宽度为100%,其实和没设一样2.span标签设置宽度无效 b) 高度 语法:height:值 用法和宽度一样 注意:div不设高度,默认是0 2. 控制的是文字与文字之间的上下距离...多学一招:如果将标签的高度和设置成一样,那么这个标签里面的文字可以在这个标签里面垂直居中,两者结合使用可以让单行文字在标签内部水平垂直居中,工作中经常用于让文字垂直居中(将设为盒子的高度) ##...#font简写 font: font-style font-weight font-size/line-height font-family 不建议修改顺序 并且不需要设置的属性可以不写 但是...font-size和font-family必须指定,否则将不起作用 div{ height:100px; border:1px solid

1.6K20

cssline-height的用法(转)

本文导读: ““指一文子的高度,具体来说是指两行文子间基线间的距离。在CSS,line-height被用来控制之间的垂直距离。line- height 属性会影响框的布局。...(),不能使用负值。...可以包含这些内容的最小框就是框。 可能的值: 值 说明 normal 默认,设置合理的行间距。 number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。...三、line-height中行、行距与半行距 是指上下文本行的基线间的垂直距离,即图中两条红线间垂直距离。 行距是指一底线到下一顶线的垂直距离,即第一粉线和第二绿线间的垂直距离。...行内框,每个行内元素会生成一个行内框,行内框是一个浏览器渲染模型中的一个概念,无法显示出来,在没有其他因素影 响的时候(padding等),行内框等于内容区域,而设定时行内框高度不变,半行距【(

95510

CSS(line-height)及文本垂直居中原理

CSS中,line-height 属性设置两段段文本之间的距离,也就是,如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了,比如下面的例子: <!...的单位 px(像素) 设置起来是最直接的,同时也最方便的。 %(百分号) 如果line-height单位设置为%,那么将来在计算的时候,基数是当前标签中的文本的字体的大小。...5.可以被继承 我们知道,CSS的三大特性是继承、层叠、优先级。line-height也是可以被继承的,如下面的示例: <!....children标签的文字变成20px了 而且,不管我们给设置什么单位(px、%、em、不带单位)都可以被继承。 6....以上面的例子为例,我们并没有设置任何字体大小,此时我们把line-height设置为150%,那么文字的将变为24px(16px*1.5=24)。

4.3K10

700无用 纯 CSS 祝考生 金榜粽《1_bit 的无用 CSS 代码 》

height: 100vh; width: 100vw; } 接下来直接创建一个 div ,给予一个 demo 样式: <div 那么这个demo 样式如下: ```css...before { width: 100px; height: 100px; top: -90%; right: 10%; } after 和 before 大小不一样,所以我设置的宽也是不一的...绘制好云后你可以再设置两个样式,当然你也可以用子元素选择器为多个云设置不一样的大小、位置信息,在这里图方便,我就直接给予了两个样式: .cloud1 { transform: scale(1);...position: absolute; height: 150px; width: 150px; } 在这里我定义了这个父容器的布局以及宽,那么接下来咱们就开始定义这个太阳的主体,直接设置一个元素圆角值给满随后稍微定一下位置即可... 1_bit 没事写的《无用CSS技巧系列内容

49520

CSSCSS 文本样式 ④ ( CSS 外观属性 | color 文本颜色 | text-align 文本对齐方式 | line-height 行间距设置 | 首缩进设置 | 文本装饰设置 )

文章目录 一、color 文本颜色 二、text-align 文本对齐方式 三、line-height 行间距设置 四、text-indent 首缩进设置 五、text-decoration 文本装饰设置...文本对齐方式 , 为标签设置CSS 样式 , 标签内的内容就会使用相应的对齐方式 ; text-align 属性 取值 : left : 左对齐 , 该值是默认值 ; right : 右对齐 ;..., 又称为 ; line-height 属性 取值 : 像素 px : 最常用的单位 , 一般情况设置 比字号大 7.8 px ; 文字默认 16 px , 为 24 px 即可 ;... 运行效果 : 四、text-indent 首缩进设置 ---- text-indent 属性 , 用于 设置缩进 ; text-indent 属性值 :...: 首缩进后的效果 : 五、text-decoration 文本装饰设置 ---- text-decoration 属性 , 用于 设置 文本装饰 ; text-decoration 属性 常用于为

1.7K30

CSSCSS 背景设置 ⑧ ( 背景设置案例 | 导航栏按钮 )

文章目录 一、背景附着 1、HTML 标签结构 2、设置 div 盒子内容水平居中显示 3、设置链接标签默认显示样式 4、设置鼠标经过样式 二、完整代码示例 1、代码示例 2、效果展示 一、背景附着...3、设置链接标签默认显示样式 在 div 盒子中的 a 标签是 行内元素 , 为其设置是无效的 , 首先要将其转为 行内块样式 ; display: inline-block; 标签背景图片大小为...即可 ; 文字垂直居中 , 需要将与文本高度设置成一致即可 , 之前设置的 标签 的高度为 50 像素 , 这里将设置成 50 像素即可 ; line-height: 50px; 图片背景设置...: none; /* 文字 垂直居中 与文本高度一致 */ line-height: 50px; /* 背景图片设置 - 简写 */ background: url(...: none; /* 文字 垂直居中 与文本高度一致 */ line-height: 50px; /* 背景图片设置 - 简写 */ background: url(

4.3K20

CSSCSS 背景设置 ⑦ ( 背景简写 )

文章目录 一、背景简写 1、语法说明 2、代码示例 一、背景简写 ---- 1、语法说明 使用 CSS 样式设置 盒子 背景时 , 需要 设置多个 CSS 样式 , 设置 背景图片 , 平铺模式 ,...定位方式 , 附着方式 等 , 下面是一个完整的图片背景设置的代码 , 代码很繁琐 ; body { /* 设置一个足够高的高度, 让页面滚动起来 */ height: 2000px;.../* 设置背景图片 */ background-image: url(images/bg.jpg); /* 设置图片背景平铺模式 */ background-repeat...scroll; } 类似于 文本样式的字样样式综合写法 方式 , 选择器 { font:font-style font-weight font-size/line-height font-family;} CSS..., 让页面滚动起来 */ height: 2000px; /* 设置背景图片 */ /*background-image: url(images/bg.jpg);*/

2.7K10

CSSCSS 背景设置 ② ( 背景位置 | 背景位置-方位值设置 )

图片 位置是 左上角 ; 设置背景位置的 CSS 语法如下 : background-position : length length background-position : position position...: 设置 background-position 属性值 之前 需要先设置 background-image 背景图片属性 ; 方位设置 : 如果设置 position 方位属性值 , 设置的是 x...: 如果 只设置了一个方位值 , 那么另外一个默认居中对齐 , 如 : 设置了 left , 则垂直方向居中对齐 ; 设置了 top , 则水平方向居中对齐 ; 坐标设置 : 如果 设置的是...length 长度坐标 , 则 第一个数值是 x 坐标 , 第二个数值是 y 坐标 ; 设置了一个值 : 如果 只设置了一个坐标值 , 那么该设置为 x 坐标设置 , 垂直方向默认居中设置 ; 同时设置放位和坐标...; /* 设置背景位置 - 右上角 */ background-position: right top; 设置背景位置为 左下角 : 粉色区域是盒子的区域 , 图片背景位于盒子左下角 ; /* 设置背景位置

3.9K20

CSS 中最后一中元素如何向左对齐

自从CSS 3.0出来以后,很多的页面布局都用弹性布来实现,特别是移动端,但是弹性布局也有它的弊端,就是最后一如果数量不够,不会像我们正常的想法一样居左对齐。效果如下: 代码如下: <!...子元素宽度不固定 如果每一个子元素宽度不固定,那最后一如何实现左对齐呢,有以下两种方法。 1. 弹性布局,两边对齐,最后一个元素的右边距设置为自动。...弹性布局,两边对齐,给外层容器添加一个伪元素,伪元素设置 flex:auto 或 flex:1。...每行列数不固定 如果每一列数不固定,那最后一如何实现左对齐呢,有以下两种方法。 1. 使用足够的空白标签进行填充占位,具体的占位数量是由最多列数的个数决定的,一最多几列,就用几个空白标签。...占位的元素的 width 和 margin 设置得和子元素一样即可,其他样式都不需要写。由于占位元素高度为0,因此,并不会影响垂直方向上的布局呈现。

1.9K10
领券