CSS常用布局一（三列布局） 一、常用的布局
前言：浏览网站时会发现圣杯布局和双飞翼布局已经是现今大多数网页布局的主流，因此也成为了前端工程师需要掌握的重要布局方式。而两种布局的效果基本一样，实现了一个两侧宽度固定，中间宽度自适应的三列布局样式。
圣杯布局的来历是2006年发在a list part上的文章In Search of the Holy Grail；
双飞翼则源自淘宝UED，两者都算是对页面的一种形象的表达，两中布局的异同如下：
相同点：
不同点：
1.圣杯布局 （1）DOM结构
<body>
<div class="header">
<h3>Headerh3>
div>
<div class="container">
<div class="middle">
<h2>这个是中间的列h2>
div>
<div class="left">
<h4>这个是左侧的列h4>
div>
<div class="right">
<h4>这个是右侧的列h4>
div>
div>
<div class="footer">
<h3>Footerh3>
div>
body>
（2）CSS代码
* {
margin: 0;
padding: 0;
}
/* 最小宽度 */
body {
min-width: 600px;
}
/* header和footer随便加一个样式 */
.header,
.footer {
border: 1px solid #333;
background: #aaa;
text-align: center;
}
/* 设置圣杯布局最中间部分，左右两边预留固定宽度 */
.container {
padding-left: 200px;
padding-right: 200px;
overflow: hidden;
}
/* 将三列设置浮动以及最小高度 */
.middle,
.left,
.right {
position: relative;
float: left;
min-height: 230px;
text-align: center;
}
/* 中间部分将宽度设为100%，自适应 */
.middle {
width: 100%;
background-color: #B0C4DE;
}
/* 左侧使用负外边距nagetive margin（也就是将margin设为负值），
再使用position，将其移动到middle的左侧预留出的200px位置显示 */
.left {
width: 200px;
margin-left: -100%;
right: 200px;
background-color: #5F9EA0;
}
/* 再将将右侧的放到预留位置即可 */
.right {
width: 200px;
margin-right: -200px;
background-color: #98FB98;
}
/* footer设置浮动清除 */
.footer{
clear: both;
}
（3）样式展示
2.双飞翼布局 （1）DOM结构
<body>
<div class="header">
<h3>Headerh3>
div>
<div class="main">
<div class="main-inner">
<h2>这个是中间列h2>
div>
div>
<div class="left">
<h4>这个是左侧列h4>
div>
<div class="right">
<h4>这个是右侧列h4>
div>
<div class="footer">
<h3>Footerh3>
div>
body>
（2）CSS代码
* {
margin: 0;
padding: 0;
}
/* 设置最小宽度 */
body {
min-width: 600px;
}
/* 设置头部和底部样式 */
.header,
.footer {
border: 1px solid #333;
background: #aaa;
text-align: center;
}
/* 设置三列浮动和最小高度 */
.left,
.main,
.right {
float: left;
min-height: 230px;
text-align: center;
}
/* 设置百分比宽度，使中间部分宽度自适应 */
.main {
width: 100%;
}
/* 设置中间部分的样式，并且设置margin-left和margin-right为左右两列预留出了空间 */
.main-inner {
margin-left: 200px;
margin-right: 200px;
min-height: 230px;
background: #F5DEB3;
}
/* 设置左侧的样式，并将左侧的div放到预留位置上 */
.left {
margin-left: -100%;
width: 200px;
background: #FF7F50;
}
/* 设置右侧样式，并将右侧的div放到预留位置上 */
.right {
margin-left: -200px;
width: 200px;
background: #FFD700;
}
/* footer设置浮动清除 */
.footer {
clear: both;
}
（3）样式展示
3.扩展与总结 （1）扩展：使用flex实现三列布局
上述的三列布局可以进行一定程度的简化，使用flex需要使用与圣杯布局相同的DOM结构
<body>
<div class="container">
<div class="middle">
<h2>这个是中间部分h2>
div>
<div class="left">
<h3>这个是左侧部分h3>
div>
<div class="right">
<h3>这个是右侧部分h3>
div>
div>
body>
/* 最小宽度 */
body {
min-width: 600px;
}
/* 设置flex布局 */
.container {
display: flex;
}
/* 设置最小高度 */
.middle,
.left,
.right {
min-height: 230px;
text-align: center;
}
/* 设置中间件部分的样式 */
.middle {
flex: 1;
background-color: #B0C4DE;
}
/* 设置左侧部分的样式 */
.left {
flex: 0 0 200px;
order: -1;
background-color: #5F9EA0;
}
/* 设置右侧部分的样式 */
.right {
flex: 0 0 200px;
background-color: #98FB98;
}
（2）总结
对比两种布局，你会发现两者实现的效果类似，但是圣杯布局的DOM结构更加自然直观，而且在日常开发中这样的DOM结构更容易形成；反观双飞翼布局，双飞翼布局则更加简洁，而且允许的页面最小宽度通常比圣杯布局更小。
这里需要注意一点，两种布局的相同点就是多用了一个div标签，其目的是为了保证中间栏可以产生浮动，又能限制自身宽度为两侧栏留出空间。
cssselect，一个让你轻松解析HTML的Python库！
大家好！今天要为大家介绍的是一个非常强大的Python库——cssselect。
在Web开发中，我们经常需要从HTML文档中提取特定的信息。使用正则表达式来解析HTML不仅复杂，而且容易出错。cssselect完美解决了这个问题，它允许我们使用CSS选择器来选取HTML元素，就像我们在前端开发中使用jQuery或CSS一样。无论是爬虫开发还是数据处理，cssselect都能让你事半功倍！
1. 快速入门
首先，我们需要安装cssselect：
pip install cssselect
最基本的使用方法非常简单。我们需要配合lxml库来解析HTML文档：
from lxml import htmlimport cssselect# 一个简单的HTML文档html_content = """
Hello, World!
This is a sample HTML document.
"""# 解析HTMLdoc = html.fromstring(html_content)# 使用CSS选择器选取元素selector = cssselect.CSSSelector('h1#title')elements = selector.select(doc)# 输出选取的元素for element in elements: print(f"Selected element: {element.text}")
小贴士：cssselect库本身只负责解析CSS选择器，需要配合lxml或其他HTML解析库一起使用。
2. 使用CSS选择器
cssselect支持几乎所有的CSS选择器语法，这使得我们可以非常灵活地选取HTML元素。
# 选取所有class为description的段落
selector = cssselect.CSSSelector('p.description')
elements = selector.select(doc)
for element in elements:
print(f"Description: {element.text}")
# 选取所有div内的元素
selector = cssselect.CSSSelector('div *')
elements = selector.select(doc)
for element in elements:
print(f"Element inside div: {element.tag} - {element.text}")
3. 复杂选择器
我们还可以使用更复杂的选择器来提取信息，例如属性选择器、伪类选择器等。
# 选取具有特定属性的元素
html_content += """
Example Link
"""
doc = html.fromstring(html_content)
selector = cssselect.CSSSelector('a[href="https://example.com"]')
elements = selector.select(doc)
for element in elements:
print(f"Link text: {element.text}")
# 选取第一个p元素
selector = cssselect.CSSSelector('p:first-of-type')
elements = selector.select(doc)
for element in elements:
print(f"First paragraph: {element.text}")
4. 实际应用场景4.1 网页爬虫
在网页爬虫中，我们经常需要从网页中提取特定的信息。cssselect可以大大简化这一过程。
import requests
from lxml import htmlimport cssselect# 请求网页url = 'https://example.com'response = requests.get(url)doc = html.fromstring(response.content)# 提取标题selector = cssselect.CSSSelector('h1')elements = selector.select(doc)for element in elements: print(f"Page title: {element.text}")# 提取所有链接selector = cssselect.CSSSelector('a')elements = selector.select(doc)for element in elements: print(f"Link: {element.get('href')}")
4.2 HTML内容清洗
有时候我们需要从HTML文档中清洗出特定的内容，cssselect也可以帮助我们完成这一任务。
# 假设我们有一个包含很多无关内容的HTML文档
html_content = """
Unwanted Header
Wanted Content
This is the content we want to extract.
"""
doc = html.fromstring(html_content)
# 提取我们想要的内容
selector = cssselect.CSSSelector('.content p')
elements = selector.select(doc)
for element in elements:
print(f"Cleaned content: {element.text}")
注意事项：在实际应用中，需要注意HTML文档的复杂性和选择器的准确性。复杂的选择器可能会影响性能，因此需要合理设计。
5. 最佳实践动手实践
学习了这么多，现在该你动手实践了！试试用cssselect来优化你的项目中的HTML解析逻辑。可以从简单的网页爬虫开始，逐步扩展到更复杂的应用场景。
别忘了在评论区分享你的使用心得！你是用cssselect解决了什么实际问题？遇到了哪些有趣的应用场景？让我们一起交流，一起进步！记住：好的工具应该让你事半功倍，cssselect正是这样一个强大的工具！
