CSS-布局

版心

版心通常使用container作为class名

在网页的布局中，我们可以先设置容器，容器div不设置宽度，让其撑满页面，然后设置一个版心

版心的宽度则取自大多数电脑屏幕分辨率的宽度，推荐设置为960-1280px区间

版心可以有一个或多个

有一些高端的网页弱化了版心的概念，选用响应式布局

常用布局名词

位置	对应单词
顶部导航条	topbar
页头	header、page-header
导航	nav、navigator、narbar
搜索框	search、search-box
横幅、广告、宣传图	banner
主要内容	content、main
侧边栏	aside、sidebar
页脚	footer、page-footer

重置默认样式

很多的元素都存在其默认样式，例如：

p元素有默认的上下margin
h1~h6标题有上下margin，且字体加粗
body元素有默认的8px外边距
超链接有默认的文字颜色和下划线
ul元素有默认的左padding
……

在早期，默认样式可以帮我们快速的绘制网页，但随着网页的设计越来越复杂，默认样式可能会带来更多的麻烦

方案一：全局选择器

*{
    margin: 0;
    padding: 0;
}

在实际开发中很少使用通配选择器，因为他会应用于页面的所有元素

方案二：reset.css

选择到具有默认样式的元素，清空其默认的样式

经过reset的网页就像是一张白纸，开发人员根据设计稿，精细的添加样式

各大公司都开源了自家的reset.css标准

方案三：Normalize.css

这是一种最新的方案，他在清除默认样式的基础上，保留了一些有价值的默认样式

Normalize.css: Make browsers render all elements more consistently.

保持默认样式：不像传统的 CSS 重置库那样完全清除所有元素的样式，normalize.css 试图保持有用的默认浏览器样式。
修复浏览器差异：它解决了各个浏览器之间的渲染差异，比如在 HTML5 元素、表格、嵌入内容、表单控件等方面。
HTML5 支持：它提供了对 HTML5 元素更好的支持，使得老版本的浏览器也能正确地显示新的 HTML5 标签。
可读性和可维护性：normalize.css 的代码是开源的，易于阅读和理解，你可以根据自己的需要进行调整。
文档化：每一个规则都被详细注释，解释其存在的原因以及所解决的问题。

CSS3-多列布局

使用column属性来实现多列布局

column-count：直接指定列数
column-width：指定每一列的宽度，会自动计算列数
column：复合属性（同时指定列数和列宽，不推荐使用）

调整列间距

column-gap：调整列间距

调整列边框

column-rule-width：宽度
column-rule-color：颜色
column-rule-style：风格
column-rule：复合属性（写起来跟border一样）

跨列

通常文章的标题需要横跨多个列

使用属性column-span:all; 来配置标题横跨所有列

多列布局图片问题

如果想让图片置于多列布局的文字中，直接将图片的width属性调制100%即可

CSS3-多列图片

这样就很简单的实现多列图片布局，很多壁纸网站都是类似的效果了

<style>
    .outer {
        column-count: 5;
    }
    img{
        width: 100%;
        transition: 0.2s linear;
    }
    img:hover {
        box-shadow: 0px 0px 20px black;
        transform: scale(1.02);
    }
</style>

<body>
    <div class="outer">
        <img src="">
        ……
        <img src="">
    </div>
</body>

JAVAWEB > angular

CSS-布局

http://blog.170827.xyz/2024/12/22/CSS-布局/

作者

XIAOBAI

发布于

2024年12月22日

许可协议

HTML5 上一篇

CSS-定位下一篇