hci css是什么,CSS：三栏布局

-三列布局，中间宽度自适应，两边定宽；

-中间栏要在浏览器中优先展示渲染；

-允许任意列的高度最高；

1. 绝对定位

原理就是将左右两边的元素设置为绝对定位，中间的元素设置其左右的margin值为左右两个元素的宽度

三栏布局

#container {

position: relative;

height: 500px;

margin: 0 auto;

background-color: gold;

}

.column {

position: absolute;

top: 0;

height: 100%;

}

#center {

margin: 0 150px 0 200px;

background-color: hotpink;

height: 100%;

}

#left {

left: 0;

width: 200px;

background-color: royalblue;

}

#right {

right: 0;

width: 150px;

background-color: blue;

}

center

left

right

2. 浮动+负边距

原理就是将三个元素都设置为左浮动，但是元素位置是中左右，然后分别设置左右的元素的宽度和边距，最后再在中间元素上加一个子元素，并将其左右边距设置成左右元素的宽度，这是最重要的一步，不然中元素会被左右元素盖住一部分。

三栏布局

.container {

min-width: 700px;

}

.middle {

float: left;

width: 100%;

height: 300px;

text-align: center;

background-color: #ffd36a;

}

.sub {

margin: 0 200px;

}

.left {

float: left;

width: 200px;

height: 300px;

margin-left: -100%;

background-color: #ff63bd;

}

.right {

float: left;

width: 200px;

height: 300px;

margin-left: -200px;

background-color: #a2ff95;

}

cjois hsheio ere fhwioefhoi wgwoigh wjw popjf fnoqi feribv ehfoih waidn howeidw efwheofhi qfqiwoh qfwbfwi fuiwe

fgguwdhq fwebf weuhfw egifwiygw gwhow eifhnv whiohweowbvwe

left

right

3. 浮动 + 超出隐藏

原理是分别将左右元素设置为浮动，因为设置为浮动回事元素脱离文档流，是父容器高度塌陷，而overflow：hidden可以清除浮动，所以可以在中元素中设置overflow:hidden来清除浮动，使三者显示在一行

三栏布局

.container {

min-width: 700px;

height: 500px;

}

.left {

float: left;

width: 200px;

background-color: violet;

}

.right {

float: right;

width: 200px;

background-color: violet;

}

.middle {

overflow: hidden;

background-color: yellow;

}

left

right

nvois hvsh ifho shfo fafiha foihafh aoifhi ogheiof ewhieofhw vni soehios hci ciosh hisohfos fsoief hsofhos hsiod fheiofh soifh dsofhid sfhis vd

4. flex布局

原理是将父容器设置为display:flex 可以使子容器排在同一行

三栏布局

.container {

display: flex;

}

.left {

flex: 0 0 100px;

background-color: #f00;

}

.main {

flex: 1;

background-color: #0f0;

}

.right {

flex: 0 0 200px;

background-color: #00f;

}

左侧栏

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates molestias consequatur facere

aperiam distinctio debitis in voluptatum quas blanditiis culpa illo minus accusantium atque quaerat unde,

architecto odit! Itaque, eos.

右侧栏

5. 网格布局

设置网格布局，并且设置grid-template-columns可以控制有几列，以及每列的宽度

三栏布局

.container {

display: grid;

grid-template-columns: 100px auto 200px;

}

.left {

background-color: #f00;

}

.right {

background-color: #00f;

}

.main {

background-color: #0f0;

}

左侧栏

Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis corporis, neque odio at, saepe

unde officiis nesciunt deleniti quidem delectus necessitatibus reiciendis nulla. Praesentium voluptates,

perspiciatis natus fuga dicta tempora!

右侧栏