该文参考了《别具光芒》一书,特此声明。
原创
2013-07-31 19:09:57
885阅读
点赞
知识点一:盒子模型的阴影是四个数值,box-shadow:10px 10px 10px -4px rgba(0,0,0,0.3);文字阴影:text-shadow:5px 6px 5px rgba(0,0,0,0.3);知识
原创
2023-03-23 20:38:28
172阅读
今天我们来了解一下浮动
我们之前说过div是一个块级元素单独占一行的,排版会很不方便,这就引出了我们今天要学习的内容:浮动
这是没加浮动的页面效果:
CSS浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
单独看上面的解释理解起来有点难度~,那么现在我们就来使用一下浮动
转载
2021-08-18 13:38:33
174阅读
一、浮动元素与父容器盒子关系二、代码示例1、有内边距的情况2、没有内边距的情况
原创
2023-04-01 21:57:28
111阅读
1、盒子模型:示意图(图片来自w3school):说明:上图中,由内而外依次是 元
原创
2022-07-25 22:19:17
213阅读
一、浮动语法简介1、语法说明2、没有浮动的效果3、左浮动的效果4
原创
2023-03-25 08:10:50
474阅读
一、浮动元素与父容器盒子关系二、代码示例1、浮动元素 + 浮动元素2、普通元素 + 浮动元素3、浮动元素 + 普通元素
原创
2023-04-01 21:57:15
197阅读
盒子横向排列-初识浮动Float(HTML、CSS)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
原创
2022-10-20 10:13:49
405阅读
上篇博客遗留了浮动和定位两个问题,仅仅是对他们进行了简单的描写叙述,今天细致透透他们的底细,此篇为浮动篇。
浮动在这个CSS排版流行的年代发挥着越来越关键的数据,如同aline对定位网页元素的重要性一样。但它比aline更加功能强大。
float主要功能是帮助对象在网页中对齐的。通过不同的命令使对象左右浮动,直到遇到border
转载
2017-06-24 20:26:00
113阅读
2评论
1.块级盒子居中 可以让一个块级盒子实现水平居中必须: 盒子必须指定了宽度(width) 然后就给左右的外边距都设置为auto, 实际工作中常用这种方式进行网页布局,示例代码如下: .header{ width:960px; margin:0 auto;} 常见的写法,以下下三种都可以。 margi ...
转载
2021-07-21 17:27:00
2809阅读
2评论
语法: box-shadow:h-shadow v-shadow blur spread color inset;radius半径(圆的半径)原理:(椭)圆与边框的交集
原创
2023-07-06 15:57:15
372阅读
给盒子添加阴影 格式如下 box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影; 注意点 盒子的阴影分为 内外阴影, 默认情况下就是 外阴影 快速添加阴影只需要编写三个参数即可 三个参数如下所示 box-shadow: 水平偏移 垂直偏移 模糊度; 默认情况下阴影的颜色和
原创
2021-03-17 08:57:00
600阅读
CSS 盒模型CSS 盒模型本质上是一个盒子,盒子包裹着 html 元素。盒子由四个属性组成,从内到外分别是:content 内容、padding 内填充、border 边框、外边距 margin。盒模型分为两种:W3C 盒子模型,即标准盒模型:width = content-widthIE 盒模型,即怪异盒模型:width = content-width + padding-width + bo
转载
2023-11-23 10:14:11
94阅读
页面中的元素都是由盒子构成的,盒子里面装的就是元素的内容。盒子的从内到外分别是内容(content),内边距(padding),边框(
原创
精选
2023-10-31 12:00:15
385阅读
文章目录浮动普通流(normal flow)浮动(float)什么是浮动?浮动详细内幕特性float 浮 漏 特现在就可以用float实现一些基本页面布局了链接清除浮动为什么要清除浮动清除浮动本质※ 清除浮动的方法1.额外标签法2.父级添加overflow属性方法3.使用after伪元素清除浮动4.使用before和after双伪元素清除浮动浮动普通流(normal flow)这个单词很多人翻译为 文档流 , 字面翻译 普通流 或者标准流都可以。前面我们说过,网页布局的核心,就是用CSS来摆放盒子
原创
2020-07-02 17:17:15
1058阅读
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家。 写在前面的话: &nb
转载
精选
2014-06-18 12:36:17
921阅读
点赞
1、圆角边框定义圆角边框后,可以将盒子定义为圆角的(1)长度方式盒子模型外边距
div{
width: 200px;
height: 100px;
background-color: yellowgreen;
border-radius:3px;
转载
2021-05-04 22:28:58
1569阅读
2评论
文字围绕浮动元素的妙用(HTML、CSS)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name
原创
2022-10-20 10:11:37
60阅读
一、浮动 left 元素向左浮动 right 元素向右浮动 none 元素不浮动 &nbs
原创
2016-05-12 22:12:23
621阅读
标准文档流标准文档流也称为正常文档流标准文档流是按照HTML元素的类型来定位的。HTML元素可以分为块级元素和行内元素。块级元素会按照从上到下的垂直顺序来排列。行内元素则按照水平顺序来排列盒子,从左到右还是从右到左取决于文档顺序浮动定位浮动定位采用float属性实现float属性值可以为left或者right当HTML元素设置float属性后,HTML元素将脱离标准文档流,也就是说HTML元素将不
原创
2016-07-16 09:29:43
377阅读