摘要: 一个完整的网页,是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。 1. 标准流 可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局。 2. 浮动 可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局。 3. 定位 定位最大的特点是有层叠的概念,就是可 阅读全文
posted @ 2022-05-21 16:10 DarkWang 阅读(73) 评论(0) 推荐(0) 编辑
摘要: 1 定位组成 定位:将盒子定在某一个位置,所以定位也是在摆放盒子, 按照定位的方式移动盒子。 定位 = 定位模式 + 边偏移 。 定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。 1.1 定位模式 定位模式决定元素的定位方式 ,它通过 CSS 的 position 属性来 阅读全文
posted @ 2022-05-21 16:09 DarkWang 阅读(416) 评论(0) 推荐(0) 编辑
摘要: 1 布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式) 2 自身属性:width / height / margin / padding / border / backg 阅读全文
posted @ 2022-05-17 14:09 DarkWang 阅读(27) 评论(0) 推荐(0) 编辑
摘要: 完成效果图 代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v 阅读全文
posted @ 2022-05-16 15:05 DarkWang 阅读(92) 评论(0) 推荐(0) 编辑
摘要: 1 为什么需要清除浮动 由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为 0 时,就会影响下面的标准流盒子。 2 清除浮动本质 ①清除浮动的本质是清除浮动元素造成的影响。 ②如果父盒子本身有高度,则不需要清除浮动。 ③清除浮动之后,父级就会根据浮动的子盒子自动检测 阅读全文
posted @ 2022-05-16 13:40 DarkWang 阅读(24) 评论(0) 推荐(0) 编辑
摘要: 1 浮动有什么用: 有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。 因为浮动可以改变元素标 签默认的排列方式。 浮动最典型的应用:可以让多个块级元素一行内排列显示。 网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。 2 什么是浮动 float 属性用于 阅读全文
posted @ 2022-05-14 12:15 DarkWang 阅读(575) 评论(0) 推荐(0) 编辑
摘要: 1 圆角边框 border-radius 属性用于设置元素的外边框圆角。 border-radius:length; 参数值可以为数值或百分比的形式。 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 50%。 该属性是一个简写属性,可以跟四个值,分别代表左上角、右上 阅读全文
posted @ 2022-05-13 23:46 DarkWang 阅读(55) 评论(0) 推荐(0) 编辑
摘要: 目录: 1 看透网页布局的本质 2 盒子模型(Box Model)组成 3 边框(border) 4 内边距(padding) 5 外边距(margin) 5.1 外边距 5.2 外边距合并和塌陷 5.3 清除内外边距 1 看透网页布局的本质 网页布局过程: 1. 先准备好相关的网页元素,网页元素基 阅读全文
posted @ 2022-05-13 12:57 DarkWang 阅读(16) 评论(0) 推荐(0) 编辑
摘要: 元素显示模式就是元素(标签)以什么方式进行显示,HTML 元素一般分为块元素和行内元素两种类型。 1.块元素 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中 <div> 标签是最典型的块元素。 块级元素的特点: (1) 比较霸道,自己独占一行。 (2)高度 阅读全文
posted @ 2022-05-12 10:00 DarkWang 阅读(56) 评论(0) 推荐(0) 编辑
摘要: 在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的,常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等。 1.后代选择器 后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写 阅读全文
posted @ 2022-05-12 09:51 DarkWang 阅读(63) 评论(0) 推荐(0) 编辑
点击右上角即可分享
微信分享提示