| CSS样式 | 您所在的位置：网站首页 › width百分比无效 › CSS样式 |
CSS样式
|
1. 宽度和高度
在我们的网页上，很多元素都有自己的宽高用来限制内部元素的范围。 width 宽度height 高度 选择器 { width: 值; height: 值; }宽度和高度只能给有块元素特性的元素设置。给行内元素设置时无效。 div { width: 100px; height: 100px; background: darkgoldenrod; } span { background: darkcyan; /* 无效的 */ width: 100px; height: 100px; }
宽高设置的可以是固定值，那么能不能是百分比呢？能用百分比，在哪个元素中，这个元素的百分比就相对于哪个元素计算 Document .box2 { width: 50%; height: 100px; background: red; } .box3 { width: 50%; height: 50px; background: darkmagenta; }
支持em单位，但是用的频率不高。 如果文字本身大小为12px，设置宽度为10em，则最终大小为120px。 1.1. 高度设置百分比会有什么问题在网页上，给元素设置100%沾满页面，直接写是无法实现的，需要给html和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-topborder-rightborder-bottomborder-left这些属性中包含对应的三个值，分别是宽度、样式、颜色 和属性拼接后，我们会产生新的12个属性 border-方向-属性名 例如： border-top-colorborder-bottom-widthborder-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行内元素和块元素可以随意的转换。 inlineblockinline-blockinline 横向排列，无法设置宽高 block 独占一行，可以设置宽高 inline-block 既能设置宽高，又能横向排列 在浏览器中，开发者工具中，点击每一个元素都可以看到对应的一个模型
可以看到以下内容 ●蓝色 content-box 指的是内容区域 ●绿色 padding-box 指的是padding ●黄色 border-box 指的是border ●暗黄色 margin padding的目的是让border和内容之间产生间距。 1. 内填充 padding属性用于实现元素内部的内容和边框区域之间的距离。 添加padding后添加boder一样的效果，会放大元素。 1.1. 语法 我们可以使用padding属性来定义内填充，有四种写法 ●一个属性值 表示四个边的内填充都是对应的值 ●两个属性值 表示 上下 左右 第一个值为上下，第二值为左右 ●三个属性值 表示 上 左右 下 第一个值为上 第二个值为左右 第三个值为下 ●四个属性值 表示 上 右 下 左 如果已经设置好了宽高，然后在这个基础上添加了padding值，那么我们就需要区减去对应的padding值的宽高值，这个操作很麻烦，后续我们有更好的方法。 1.1.1. 单独方向设置 ●padding-left 左填充 ●padding-right 右填充 ●padding-top 上填充 ●padding-bottom 下填充 这些属性都只能写一个值，如果写多个，就会出问题。 1.2. 使用场景 1.2.1. input输入框 为了保证对应的效果美观，输入的文字不贴边框，一般设计师会给输入框设置padding值。 1.2.2. 元素距离对应的边框有padding
2. 外填充 外填充指边框外和其他元素之间的距离。 外填充叫margin，在我们对应的页面上，元素和元素之间的间距都可以使用外填充实现。 2.1. 语法 2.1.1. 基本使用方法 外填充和内填充一样，可以有多种写法，不同的值的数量代表着不同的方向。 2.1.2. 单个方向设置margin margin和padding相同支持单个方向的设置 ●margin-left ●margin-right ●margin-top ●margin-bottom 同样要记住，这些属性只能写一个值，不能写多个值。 2.2. 样式重置 网页上很多元素上都有默认的margin值，比如： p、body、hx、列表，而大部分情况下，我们不需要使用这些margin值，所以我们要清除掉。 2.3. 块元素水平居中 当我们有一个固定宽度的块元素时，我们可以让其居中，使用margin操作 直接设置 margion: 0 auto这种方法也可以，但是要清楚，我们水平居中的核心代码是左右auto和上下无关，所以未来上下设置成多少都无所谓。 2.3.1. 版心 为了我们对应的大部分的用户的显示器都能正常访问我们的网站，所以我们会选用一个固定的宽度居中，来作为网页主体内容展示的区域，这个区域叫版心（安全宽度）。 京东的安全宽度是1190，和淘宝一样。小米是1226px 版心的实现，就是借助我们对应的margin属性居中的特性。 一般版心的类名叫container，所以一般我们会给版心设置一个单独的样式 .container { width: 1226px; margin-left: auto; margin-right: auto; } |
【本文地址】