1. 宽度和高度
在我们的网页上,很多元素都有自己的宽高用来限制内部元素的范围。
- width 宽度
- height 高度
选择器 { width: 值; height: 值; }
宽度和高度只能给有块元素特性的元素设置。给行内元素设置时无效。
div { width: 100px; height: 100px; background: darkgoldenrod; } span { background: darkcyan; /* 无效的 */ width: 100px; height: 100px; }
宽高设置的可以是固定值,那么能不能是百分比呢?能用百分比,在哪个元素中,这个元素的百分比就相对于哪个元素计算
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box2 { width: 50%; height: 100px; background: red; } .box3 { width: 50%; height: 50px; background: darkmagenta; } </style> </head> <body> <div class="box2"> <div class="box3"></div> </div> </body> </html>
支持em单位,但是用的频率不高。
如果文字本身大小为12px,设置宽度为10em,则最终大小为120px。
1.1. 高度设置百分比会有什么问题
在网页上,给元素设置100%沾满页面,直接写是无法实现的,需要给html和body都设置为宽度百分百
<body> <div class="box"></div> </body>
body, html, .box { height: 100% }
1.2. 最大/最小 宽度/高度
如果我们定义了宽高,那么这个元素就一定是那么宽那么高。
2. 边框 border
边框指的是围绕我们的元素四周的线。利用border属性进行设置。可以同时给四个边进行边框的设置,同时也可以单独的定义每个方向上的边框。
选择器 { border: 边框宽度 边框样式 颜色; }
添加边框后,默认情况,边框会在原有宽高基础上往外扩。元素的总的宽高,就是实际设置宽高 + boder
如果想要去除边框,我们可以使用属性none
选择器 { border: none; }
2.1. 边框属性
2.1.1. 边框宽度
通过设置px等单位,一般都是去设置px。来定义边框宽度
我们有专门的属性用来单独定义边框border-width
选择器 { border-width: 1px; }
2.1.2. 边框样式
- solid 实线
- dashed 虚线
- dotted 点线
通过设置border-style
可以定义边框样式
选择器 { border-style: solid; }
2.1.3. 颜色
可以通过填写对应的色值设置颜色。
通过定义border-color可以实现颜色单独定义。
一个特殊的颜色
透明,transparent 是一个关键字,在使用颜色的地方用来表示颜色的。
选择器 { border-color: transparent; }
2.2. 边框方向
四边形有上右下左四个方向。
- border-top
- border-right
- border-bottom
- border-left
这些属性中包含对应的三个值,分别是宽度、样式、颜色
和属性拼接后,我们会产生新的12个属性 border-方向-属性名
例如:
- border-top-color
- border-bottom-width
- border-left-style
注意!!!!未来更多的我们会使用border属性和单独的方向属性。
2.3. 实现三角形
.box { width: 0; border: 10px solid transparent; border-right-color: red; }
扩展属性
黑色边框线
浏览器需要让用户知道,当前的表单元素焦点在哪。所以获取焦点的表单元素会有一个黑色的边框。注意!!!这个边框不是border
这个边框叫outline
这个东西不占空间。因为会影响到我们的美观度,所以要去除。
input, button, select, textarea { outline: none; }
圆角
在网页上,很多地方都会有圆角,因为好看。元素有四个角,分别为上左、上右、下右、下左。
一般定义圆角都是四个叫都定义,如果都定义成相同的圆角,则使用一个值即可。
选择器 { border-radius: 值; }
本质上,圆角的值指的就是对应的⚪的半径。在蓝湖中,我们只需要选择对应的元素,就会提示相关的圆角值。
圆角可以写四个值。四个值就代表四个角方向,顺序是上左、上右、下右、下左。
选择器 { border-radius: 10px 0 0 10px; }
正圆
正圆的前提需要是一个正方形,直接设置圆角值为50%时会得到一个正圆。
如果时一个长方形,设置了值为50%,则会得到椭圆
胶囊形,短边占1半。
对齐
这里的对齐只表示行内元素对齐的问题。
因为默认情况下,是基于基线(baseline)对齐,导致视觉上不齐。
如果我们想要让文字对齐,那么就需要给所有参与对齐元素添加vertical-align
属性。
- baseline 默认值 基于基线对齐
- top 上对齐
- bottom 下对齐
- middle 居中 最常用
一般我们会用到这个属性,大部分情况都是在图标+文字的布局中使用。因为现在有flex,所以这个属性用的没有那么的多了。
display
行内元素和块元素可以随意的转换。
- inline
- block
- inline-block
inline 横向排列,无法设置宽高
block 独占一行,可以设置宽高
inline-block 既能设置宽高,又能横向排列