目录
1.元素宽度的问题
当给一个元素设置宽或高的时候,指定的是内容的宽或高,所有内边距、边框、外边距都是追加到该宽度上的。
2. cale() ,计算数值
.column-wrap .container{
width: 100%;
}
.column-wrap .container main{
padding: 20px;
width: 70%;
border-radius: 0.5em;
background-color: #890;
float: left;
}
.column-wrap .container sidebar{
padding: 20px;
margin-left: 1.5em;
width: calc(30% - 1.5em);
border-radius: 0.5em;
background-color: #890;
float: left;
}
<div class="column-wrap">
<h2>实现等高列</h2>
<div>
<header>Franklin Running Club</header>
<div class="container">
<main>
<h3>Welcome Join Us</h3>
<p>你好,欢迎加入我们!</p>
</main>
<sidebar>
这里是侧边栏
</sidebar>
</div>
</div>
</div>
效果:
3. 调整盒模型
在CSS中可以使用box-sizing属性调整盒模型的行为。
box-sizing的默认值为content-box,这意味任何指定的宽或高都只会设置内容盒子的大小。
box-sizing设置为border-box后,height和width属性会设置内容、内边距以及边框的大小总和
4.全局设置border-box
用通用选择器(*)选中了页面上所有元素,并用两个选择器选中了网页的所有伪元素。将这段代码放到你的样式表开头。
*,
::before,
::after{
box-sizing:border-box;
}
更优化代码:
盒模型通常不会被继承,但是使用inherit关键字可以强制继承
如下述代码所示,可以在必要时选中第三方组件的顶级容器,将其恢复为content-box。这样组件的内部元素会继承该盒模型。
5.元素高度的问题
普通文档流是为限定的宽度和无限的高度设计的。
当明确设置一个元素的高度时,内容可能会溢出容器。
用overflow属性可以控制溢出内容的行为,该属性支持以下4个值。
❑ visible(默认值)——所有内容可见,即使溢出容器边缘。
❑ hidden——溢出容器内边距边缘的内容被裁剪,无法看见。
❑ scroll——容器出现滚动条,用户可以通过滚动查看剩余内容。在一些操作系统上,会出现水平和垂直两种滚动条,即使所有内容都可见(不溢出)。不过,在这种情况下,滚动条不可滚动(置灰)。
❑ auto——只有内容溢出时容器才会出现滚动条。
用百分比指定高度:必须给父元素明确定义一个高度。
用百分比指定高度存在问题。百分比参考的是元素容器块的大小,但是容器的高度通常是由子元素的高度决定的。这样会造成死循环,浏览器处理不了,因此它会忽略这个声明。
要想让百分比高度生效,必须给父元素明确定义一个高度。
5.1 等高列
最好的办法是让它们自己决定高度,然后扩展较矮的列,让它的高度等于较高的列。
5.1.1 使用css表格布局代替浮动布局
.column-wrap .container{
width: 100%;
display: table;
}
.column-wrap .container main{
padding: 20px;
width: 70%;
border-radius: 0.5em;
background-color: #890;
display:table-cell;
}
.column-wrap .container sidebar{
padding: 20px;
margin-left:1.5em;(display:table-cell,外边距不生效)
width: 30%;
border-radius: 0.5em;
background-color: #890;
display:table-cell;
}
上图看到外边距并不会作用于table-cell元素,那如何让间隔生效呢?
5.1.2 使用flexbox实现等高列
给容器设置display: flex,它就变成了一个弹性容器(flex container),子元素默认等高
.container{
display:flex;
}
.main{
padding: 1.5em;
width: 70%;
border-radius: 0.5em;
}
.sidebar{
width:30%
margin-left: 1.5em;
padding: 1.5em;
border-radius: 0.5em;
}
5.1.3 使用min-height和max-height
min-height和max-height。你可以用这两个属性指定最小或最大值,而不是明确定义高度,这样元素就可以在这些界限内自动决定高度。
5.1.4 垂直居中内容
vertical-align声明只会影响行内元素或者table-cell元素。对于行内元素,它控制着该元素跟同一行内其他元素之间的对齐关系。比如,可以用它控制一个行内的图片跟相邻的文字对齐。
垂直居中指南
在容器里让内容居中最好的方式是根据特定场景考虑不同因素。做出判断前,先逐个询问自己以下几个问题,直到找到合适的解决办法。
❑ 可以用一个自然高度的容器吗?给容器加上相等的上下内边距让内容居中。
❑ 容器需要指定高度或者避免使用内边距吗?对容器使用display: table-cell和vertical-align: middle。
❑ 可以用Flexbox吗? 如果不需要支持IE9,可以用Flexbox居中内容。
❑ 容器里面的内容只有一行文字吗?设置一个大的行高,让它等于理想的容器高度。这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素,可以设置为inline-block。
❑ 容器和内容的高度都知道吗?将内容绝对定位。(只有当前面提到的方法都无效时才推荐这种方式。)
❑ 不知道内部元素的高度?用绝对定位结合变形(transform)。(还是只有当前面提到的方法都无效时才推荐该方法。)还不确定的话,参考howtocenterincss网站。这个网站很不错,可以根据自己的场景填写几个选项,然后它会相应地生成垂直居中的代码。