这是《CSS设计指南》的读书笔记，用于加深学习效果。 display 属性 display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。...流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕，但同时也意味着放弃对页面某些方面的控制，比如随着页面宽度变化，文本行的长度和页面元素之间的位置关系都可能变化。...布局的高度 多数情况下，布局中结构化元素（乃至任何元素）的高度是不必设定的。事实上，我甚至想告诉你根本不应该给元素设定高度。除非你确实需要这样做，比如在页面中创造一个绝对定位的元素。...总结 这篇文章我们介绍了用浮动的有宽度的元素来创建多栏布局、如何让固定布局在页面上居中以及让它们在一定范围内可以伸缩。同时也了解了如何使用内部div在浮动元素中生成间距，而又不会改变布局的总宽度。...参考链接 CSS入门指南-2：盒子模型、浮动和清除 CSS入门指南-3：定位元素 学习CSS布局 Fighting the Space Between Inline Block Elements Flex
目录 CSS概念 好处 CSS的使用：CSS与html结合方式 内联样式 内部样式 外部样式 CSS语法 选择器：筛选具有相似特征的元素 基础选择器 扩展选择器 属性 案例：注册页面 ---- CSS概念...； 选择器：筛选具有相似特征的元素 基础选择器 id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一 语法：#id属性值{} 元素选择器：选择具有相同标签名称的元素 语法： 标签名称...text-align：对其方式 line-height：行高 背景 background： 边框 border：设置边框，符合属性 尺寸 width：宽度 height：高度 盒子模型：控制布局...默认情况下内边距会影响整个盒子的大小 box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小 float：浮动 left right 案例：注册页面...DOCTYPE html> 注册页面
我们在编写网页代码时，首先应该做的就是设计好页面的布局形式，然后再往里面填充内容。网页布局的好与坏，直接决定了网页最终的展示效果。...这里总结一下 WEB前端CSS部分的定位问题，同时这些问题也是对一些基础的技术概念和思想的理解。对这些基本知识的掌握程度和深度决定了你的技术层级。...CSS文档流大致可以分为3种：标准流，浮动流，定位流。 1，标准流 默认情况下，HTML元素都在标准流中呈现和展示。...满足这种要求的布局我们一般有两种方式，圣杯布局和双飞翼布局。...小知识点 ----- 用纯 CSS 创建一个三角形的原理是什么？
目前最为广泛采用的网页布局方式——Div + CSS 所谓Div + CSS,是指通过HTML「层」标签——,辅以CSS中对该「层」宽度、排列等样式的定义，来实现网页布局的一种方式...另外，要修改某个Div的布局位置，也只需要相应的调整其CSS样式即可。 但是Div所谓的灵活也并非随心所欲、胡乱排布，它也是遵守一定的排布规则的 具体来说，Table的排布方式一般如下。... 将页面等分成12栏 分栏布局是使用Div+CSS布局网页的一种主要布局方式...，主要通过把页面等分成12栏来实现 一般你看到的网站都会分成几栏？...所以说，把页面分成12栏的好处就是——能利用合并栏来将页面等分成2、3、4栏，如下图 ?
1.1.2、去除列表右边框 开发中常需要在页面中展示一些列表，如商品展示列表等，如果我们要实现如下布局： ? 示例代码： <!...1.1.3、负边距+定位，实现水平垂直居中 具体请参考《CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法》 1.1.4、去除列表最后一个li元素的border-bottom ?...1.3.2、多列布局 栅格系统并没有真正实现分栏效果（如word中的分栏），CSS3为了满足这个要求增加了多列布局模块，如果需要实现多列布局模块先看看这几个CSS3属性： column-count：<integer...是当下比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。...该脚本循环遍历页面上的所有 CSS 引用，并使用媒体查询分析 CSS 规则。然后，该脚本会监控浏览器宽度变化，添加或删除与 CSS 中媒体查询匹配的样式。
在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。...在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。...是当下比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。...3.3.5、imagesLoaded imagesLoaded 是一个用于来检测网页中的图片是否载入完成的 JavaScript 工具库。支持回调的获取图片加载的进度，还可以绑定自定义事件。...该脚本循环遍历页面上的所有 CSS 引用，并使用媒体查询分析 CSS 规则。然后，该脚本会监控浏览器宽度变化，添加或删除与 CSS 中媒体查询匹配的样式。
CSS补充之--页面布局 主站一：（下面是一个大致的模板） <div style="width: 1200px;margin: 0 auto...<em>布局</em>一：效果图如下： ?...：效果图如下（这种是必须会的，后台<em>布局</em>经常用） ?...将文件下载下来 通过在头部导入： 做出的效果如下： ? ?...注意： 我们之前写html代码都是最普通的Dom0的写法，这种不建议工作中这样写，工作中要实现行为，样式，结构相分离的<em>页面</em>，即js、<em>css</em>、html相分离 代码例子如下： <meta
大家好，本篇文章将分享我们业务中很常见的10个页面布局代码片段，这10 种页面布局很常见，实现方式也有很多种，本篇文章将用最简单的新方式进行实现，希望对大家有所启发。...1、Card layout（卡片布局） 如下图所示，卡片布局是我们常见的一种页面布局。 HTML部分 <!...） 圣杯布局，不用我多说，想必每个前端人都做过这样的页面结构，如下图所示 HTML部分 <!...__main { /* 占据剩余的宽度 */ flex: 1; /* 超出显示滚动条 */ overflow: auto; } 6、简单的网格布局 接下来我们使用弹性布局的方式...它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。
#什么是 BFC Box：Box 是 CSS 布局的对象和基本单位，你可以理解一个页面就是由很多的 Box 组成的 Formatting Context：即格式化上下文，它是存在页面中的一块独立的渲染区域...它是存在于页面中的一块独立渲染的区域，有一套单独的渲染规则。这里的元素不会在布局上影响到外面的元素（比如浮动/定位的元素等等）。...不和浮动元素重叠 在一个BFC中使用两个BFC可以做两列布局时使用 #水平居中布局 #空间居中布局 Grid 布局 .container { display: grid; place-items
一、基础 1.position 这是由于float和绝对定位都是使用块框架（block layout）来显示，所以会隐式地改变display的值。 二、居中 1...
1 什么是响应式布局？ 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天，我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。...传统的开发方式是PC端开发一套页面，手机端再开发一套页面。但是这样做非常麻烦，随着不同的终端越来越多，你需要开发多个不同版本的页面。而使用响应式布局只要开发一套就够了。...响应式开发的原理是使用CSS3中的Media Query（媒体查询）针对不同宽度的设备设置不同的布局和样式，从而适配不同的设备。... 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。...CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式， 当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
CSS有三种基本的定位机制：普通流，浮动和绝对定位。...因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上。...浮动布局 首先介绍一些浮动模型的基本知识：浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。...> 可以看出浮动后虽然黄色div布局不受浮动影响，正常布局，但是文字部分却被挤到了紫色浮动div下边。...参考文档 CSS布局 ——从display，position， float属性谈起.:
布局模型 在网页中，元素有三种布局模型： 1、流动模型（Flow） 默认的 2、浮动模型 (Float) 3、层模型（Layer） 1、流动模型（Flow） 流动（Flow）模型是默认的网页布局模式。...（内联元素可不像块状元素这么霸道独占一行） 2、浮动模型 (Float) 任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动 div{float:left;} div{float:right...;} 可以为不同的div设置不同的浮动方式来布局。...绝对定位使元素脱离文档流，因此不占据空间 ，普通文档流中元素的布局就当绝对定位的元素不存在时一样，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。...因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。 浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧，文字内容会围绕在浮动元素周围。
圣杯布局和双飞翼布局一直是前端面试的高频考点，圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》。...比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。...效果图 原本录制了一个小视频，奈何不能上传到博客中，视频中通过缩放页面可以发现随着页面的宽度的变化，这三栏布局是中间盒子优先渲染，两边的盒子框子宽度固定不变，即使页面宽度变小，也不影响我们的浏览...圣杯布局要求 header和footer各自占领屏幕所有宽度，高度固定。 中间的container是一个三栏布局。 三栏布局两侧宽度固定不变，中间部分自动填充整个区域。...中间的container是一个三栏布局。 三栏布局两侧宽度固定不变，中间部分自动填充整个区域。 中间部分的高度是三栏中最高的区域的高度。
首先，根据事先设计好的图片对页面进行模块划分 “回”字原理（自我总结） 然后，开始使用Html+css进行架构 页面实现知识要点： 第一，页面元素分为块级元素与行内元素 第二， 元素位置...第四，顺序 行内元素与块级元素遵循从上到下，从左到右的顺序依次渲染在页面上，所有在设计是需注意元素顺序 第五，盒子模型-------针对块级元素 ?...boder保持原样大小， 原则是：以内为准 上边，左边的相对位置不变，右边，下边变化 margin:由于隔开块元素与块元元素 （5）控制div的外框： 使用boder padding margin 第六：CSS
一个弹性容器能控制内部元素的布局。子元素按照主轴线排列，主轴的方向为主起点（左）到主终点（右）。垂直于主轴的是副轴。方向从副起点（上）到副终点（下）。这些轴的方向可以改变。...基础页面 :root { box-sizing: border-box; } *, ::before...在 CSS 里，不仅要考虑当前网页的内容，还要考虑内容变化后的情况，或者是相同的样式表作用到相似网页上的情况。...https://codepen.io/cellinlab/pen/JjMpVvp 水平弹性盒子的大部分概念同样适用于垂直的弹性盒子（column 或 column-reverse），但是有一点不同：在 CSS...让屏幕上的视觉布局顺序和源码顺序差别太大会影响网站的可访问性。
CSS布局(二) 等高布局 等高布局，顾名思义，就是指子元素在父元素中高度相等的布局。 开始之前，先看一个情境。... css代码 main { color: #eee; } main>div { display: inline-block; width: 300px...html 主体内容 css html, body {...有flex布局的地方怎么能没有grid布局(×?)。...、grid布局真nb 参考链接： 常用的多列等高布局收藏 css实现上下固定中间自适应布局 实现粘连布局
01 - Flex布局是什么 在翻译中，“Flex”意为“松紧带”，在前端开发中可以理解为弹性布局。...所有的浏览器目前都支持了Flex布局，除“Webkit ”内核的浏览器需要加如下前缀： display:-webkit-flex; 02 - 需要注意 1、设为 Flex 布局以后，子元素的float、...2、行内元素也可以使用 Flex 布局。 03 - 属性 1、flex-direction（容器）属性 描述：决定主轴的方向。 row（默认值）：主轴为水平方向，起点在左端。
前言 常见的后台管理页面，左侧固定宽度展示操作菜单栏，右侧显示左侧展示管理内容。 这是一种最常见的左侧固定，右侧自适应布局方式。...左侧固定，右侧自适应布局 在container1里面写2个div 左侧菜单栏...优化方法可以使用css 给元素后面加一个伪元素:after .container1{ padding: 10px;...1; overflow: hidden; /*右边盒子overflow:hidden触发bfc*/ } 实现效果是一样的 更多页面布局方式参考...caicai1171523597/article/details/86642535 overflow相关知识点https://blog.csdn.net/qq_41638795/article/details/83304388 CSS
CSS布局 确定页面的大致结构，页面分多少块，每块的位置。每个部分怎么把该部分撑起来。...* 写css时要注意z-index的设置，一般来说 会给不同的元素 设置不同的区间，以防元素之间相互覆盖。...响应式页面的设计 如果没有 设计思路的支持，是很难进行的。...对于精确性非常高的地方 就不要使用rem来布局了。 CSS面试题 1. 实现两栏/三栏的布局 的方法 1....* 适配页面的viewport(页面的宽度 要和 移动端的宽度 适配，否则页面 在移动端上 会缩小，也就是一定要加viewport) * rem/viewport/media query
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
