甘肃网站建设专家,额尔古纳网站建设价格,南宁网络系统开发,wordpress 移动商城主题目录 CSS的简介CSS的概念语法 CSS的引入方式内联样式#xff08;行内样式#xff09;内部样式外部样式#xff08;推荐#xff09; 选择器全局选择器元素选择器类选择器ID选择器合并选择器后代选择器子选择器相邻兄弟选择器通用兄弟选择器伪类选择器:link:visited:hover:ac… 目录 CSS的简介CSS的概念语法 CSS的引入方式内联样式行内样式内部样式外部样式推荐 选择器全局选择器元素选择器类选择器ID选择器合并选择器后代选择器子选择器相邻兄弟选择器通用兄弟选择器伪类选择器:link:visited:hover:active:focus:first-child:last-child:nth-child(n):nth-of-type(n):not(selector) 字体属性colorfont-sizefont-weightfont-stylefont-familyline-heightletter-spacingword-spacing 背景属性background-color 属性background-image属性background-repeat属性background-size属性background-position属性 文本属性text-aligntext-decorationtext-transformtext-indent 表格属性表格边框折叠边框表格宽度和高度表格文字对齐表格填充表格颜色 CSS盒子模型Box Model概念 弹性盒子模型flex box定义弹性容器Flex Container弹性项目Flex Items主轴Main Axis和交叉轴Cross Axis弹性容器的属性justify-contentalign-itemsflex-wrap 弹性项目的属性flex-growflex-shrinkflex-basisflexflex-decoration 文档流文档流产生的问题高矮不齐底边对齐空格折叠元素无间距 脱离文档流 浮动定义浮动的原理元素向左浮动当容器不足时 CSS的简介
CSS的概念
CSS(Cascading Style Sheets)层叠样式表又叫级联样式表简称样式表 CSS文件的后缀名为.css CSS用于HTML文档中元素样式的定义
语法
CSS规则由两个主要部分构成选择器以及一条或多条声明
headstyle选择器{属性名属性值;属性名属性值;}/style
/head选择器要修饰的对象东西属性名修饰对象的哪一个属性样式属性值样式的取值
CSS的引入方式
内联样式行内样式
要使用内联样式需要在相关的标签内使用样式style属性。style属性可以包含任何CSS属性
p stylecolor:red;font-size:20px;我是内联样式的方案/p内部样式
当单个文档需要特殊的样式时就应该使用内部样式表。你可以使用style标签在文档头部定义内部样式表
headstylep {color:red;font-size:20px;}/style
/head在上面的代码中之后所有的p标签都会生效这个样式
外部样式推荐
当样式需要应用于很多页面时外部样式表将是理想的选择。在使用外部样式表的情况下你可以通过改变一个文件来改变整个站点的外观。每个页面使用link标签链接到样式表。link标签在文档的头部
现在有如下两个页面我希望让这两个页面的p标签都能应用同样的样式。
bodyp首页/pa href./product.html产品/a
/bodybodyp产品/p
/body可以在同级目录下创建一个.css文件 在里面设置所希望p标签的样式
p{color:red;font-size:30px;
}接着回到两个页面的html文件中在头部用link标签引入public.css文件
headlink relstylesheet href./public.css
/head这样子就成功给不同页面的同一标签加上同样的效果了
选择器
全局选择器
可以与任何元素匹配优先级最低一般做样式初始化
*{margin: 0;padding: 0;
}元素选择器
HTML文档中的元素p、b、div、a、img、body等 标签选择器选择的是页面上所有这种类型的标签所以经常描述“共性”无法描述某一个元素的“个性”
p{font-size 30px;
}类选择器
通过给HTML元素添加class属性然后使用类选择器来匹配具有相同class值的元素。类选择器在HTML中可以被多个元素使用因此它可以用于为一组元素设置相同的样式也可以用于区分不同的元素组给它们设置不同的样式。类选择器的优先级高于元素选择器低于ID选择器。
/* 类选择器以英文句点.开头后面紧跟类名 */
.my-class {color: red;font-weight: bold;
}在HTML中使用
p classmy-class这是一个使用了类选择器设置样式的段落。/p
span classmy-class这是一个使用了相同类选择器设置样式的span元素。/spanID选择器
HTML元素可以通过id属性来唯一标识ID选择器就是用来匹配具有特定id值的元素。每个HTML文档中id值必须是唯一的因此ID选择器通常用于为单个元素设置独特的样式。ID选择器的优先级高于类选择器和元素选择器。
/* ID选择器以英文井号#开头后面紧跟ID名 */
#my-id {background-color: lightblue;padding: 20px;border: 1px solid gray;
}在HTML中使用
div idmy-id这是一个使用了ID选择器设置样式的div元素。/div合并选择器
合并选择器也被称为群组选择器它允许你将多个选择器组合在一起同时为这些选择器所选中的元素应用相同的样式。这样可以避免重复编写相同的样式规则提高CSS代码的简洁性和可维护性。合并选择器使用逗号,来分隔不同的选择器。
/* 同时选择 p 元素、class 为 my-class 的元素以及 id 为 my-id 的元素 */
p,
.my-class,
#my-id {/* 这里设置的样式会同时应用到上述三种选择器选中的元素上 */text-align: center;line-height: 1.6;margin-bottom: 10px;
}在HTML中使用
p这是一个段落会应用合并选择器设置的样式。/p
div classmy-class这是一个使用了类选择器的div元素同样会应用样式。/div
span idmy-id这是一个使用了ID选择器的span元素也会应用样式。/span后代选择器
后代选择器用于选择某个元素的所有后代元素。后代元素是指包含在该元素内部的所有元素不管嵌套多少层。后代选择器使用空格来分隔选择器选择器的顺序是从祖先元素到后代元素。它可以更精确地选择特定元素下的子元素从而设置不同的样式。
/* 选择div元素内部的所有p元素 */
div p {color: green;font-style: italic;
}在HTML中使用
divp这是div内部的段落会应用后代选择器的样式。/pullip这也是div内部的段落同样会应用样式。/p/li/ul
/div子选择器
子选择器与后代选择器类似但它只选择元素的直接子元素而不是所有后代元素。子选择器使用大于号来分隔选择器选择器的顺序是从父元素到子元素。
/* 选择div元素的直接子元素p */
div p {border: 1px solid orange;margin-top: 10px;
}在HTML中使用
divp这是div的直接子元素段落会应用子选择器的样式。/pdivp这不是div的直接子元素段落不会应用上述样式。/p/div
/div相邻兄弟选择器
相邻兄弟选择器使用加号来连接两个选择器。它用于选择紧接在某个元素之后的相邻兄弟元素即该元素后面紧邻的具有相同父元素的元素。也就是说被选择的元素必须和前面的元素拥有相同的父元素并且在文档流中紧挨着前面元素之后。
/* 选择紧接在 h2 元素之后的相邻 p 元素 */
h2 p {color: purple;font-size: 18px;
}在HTML中使用
h2标题2/h2
p这是紧跟在 h2 后面的段落会应用相邻兄弟选择器的样式。/p
p这个段落不会应用相邻兄弟选择器的样式因为它不是紧挨着 h2 元素的。/p
divp这个段落虽然也是 p 元素但它不是紧接在 h2 后面的兄弟元素不会应用上述样式。/p
/div通用兄弟选择器
通用兄弟选择器使用波浪号~来连接两个选择器。它可以选择某元素之后的所有同级兄弟元素这些元素需要满足两个条件一是与前面的元素具有相同的父元素二是在文档流中出现在前面元素之后。它提供了一种更灵活的方式来为多个同级元素设置样式只要它们处于目标元素之后无论相隔多远都可以被选中。
/* 选择在 h2 元素之后的所有 p 兄弟元素 */
h2 ~ p {color: #666;font-style: italic;margin-top: 10px;
}在 HTML 中使用
h2标题/h2
p这是在 h2 元素之后的第一个 p 元素会应用通用兄弟选择器的样式。/p
div这里是一个 div 元素不会被选中。/div
p这是在 h2 元素之后的第二个 p 元素同样会应用样式。/p
p这是在 h2 元素之后的第三个 p 元素也会应用样式。/p伪类选择器
伪类选择器是CSS中一种特殊的选择器它允许你基于元素的状态或信息来选择元素而不是仅基于元素的结构或属性。以下是一些常见的伪类选择器及其用法
:link
用于选择未被访问过的链接。
a:link {color: blue;text-decoration: none;
}上述代码将未访问过的链接的颜色设置为蓝色并且去掉下划线。
:visited
用于选择已被访问过的链接。
a:visited {color: purple;
}此代码将已访问过的链接的颜色设置为紫色。
:hover
当鼠标悬停在元素上时使用此伪类。常用于为元素添加交互效果比如改变颜色、添加下划线或显示隐藏内容等。
a:hover {color: red;text-decoration: underline;
}当鼠标悬停在链接上时该链接的颜色会变为红色并添加下划线。
:active
选择正在被用户激活的元素通常是在鼠标按下但未松开时。
button:active {background-color: #ccc;
}当按钮被按下时其背景颜色会变成灰色。
:focus
选择获得焦点的元素例如用户通过键盘的Tab键或点击输入框时输入框会获得焦点。
input:focus {border: 2px solid orange;
}当输入框获得焦点时会添加一个橙色的边框。
:first-child
选择父元素的第一个子元素。
ul li:first-child {font-weight: bold;
}对于无序列表会将列表中的第一个列表项的字体加粗。
:last-child
选择父元素的最后一个子元素。
ul li:last-child {border-bottom: none;
}对于无序列表会将列表中的最后一个列表项的底部边框去掉。
:nth-child(n)
选择父元素的第n个子元素其中n可以是数字、关键字如odd或even或公式如2n1。
table tr:nth-child(even) {background-color: #f2f2f2;
}对于表格会将偶数行的背景颜色设置为浅灰色这在表格样式设计中可以用来实现隔行变色的效果提高表格的可读性。
:nth-of-type(n)
选择父元素中同类型元素的第n个元素。与:nth-child不同它只考虑同类型的元素而不是所有子元素。
div p:nth-of-type(2) {font-style: italic;
}在一个包含多种元素的div中会将第二个p元素的字体设置为斜体。
:not(selector)
用于排除某些元素选择不满足括号内选择器条件的元素。
p:not(.highlight) {color: black;
}会将没有 highlight 类的段落元素的颜色设置为黑色而具有 highlight 类的段落将不受此样式影响。
字体属性
color
规定文本的颜色 有如下四种设置方式颜色名称十六进制RGB值RGBA值
font-size
设置文本的大小
h1{font-size:40px;}
h2{font-size:30px;}注意chrome浏览器接受最小的字体是12px
font-weight
设置文本的粗细
值描述bold定义粗体字符bolder定义更粗的字符lighter定义更细的字符100~900定义由细到粗 400等同默认而700等同bold
H1 {font-weight:normal;}
div{font-weight:bold;}
p {font-weight:900;}font-style
指定文本的字体样式它主要用于控制文本的字体风格如正常、斜体或倾斜。
p {font-style: italic;}
span {font-style: oblique;}
h1 {font-style: normal;}italic使文本呈现为斜体样式。通常当字体支持斜体时会使用字体的斜体变体。如果字体没有斜体变体浏览器可能会模拟斜体效果。oblique类似于 italic但 oblique 更像是将正常字体进行倾斜处理而不是使用专门的斜体变体。在实际使用中italic 和 oblique 的区别可能不太明显具体取决于字体的支持情况。normal将文本恢复到正常的字体样式即不使用斜体或倾斜。
font-family
用于指定元素的字体。可以使用多个字体名称以逗号分隔作为一个字体栈。浏览器会按照字体栈的顺序依次查找字体如果第一种字体不可用会尝试使用下一个字体依此类推。
body {font-family: Arial, Helvetica, sans-serif;}p{font-family:微软雅黑;}在这个示例中浏览器会首先尝试使用 Arial 字体如果 Arial 字体不可用会尝试使用 Helvetica 字体如果两者都不可用会使用 sans-serif 这个通用字体族。 你可以指定具体的字体名称如 Times New Roman、Verdana 等也可以使用通用字体族如 serif、sans-serif、monospace、cursive、fantasy 等。通用字体族是一组具有相似外观的字体集合这样可以确保即使指定的具体字体不可用也能有一个合适的替代字体。
line-height
设置文本行与行之间的距离也称为行高。可以使用不同的单位如像素px、百分比%、无单位数字推荐相对字号等。
p {line-height: 20px;}
div {line-height: 150%;}
h1 {font-size: 30px;line-height: 1.5;
}对于 line-height: 20px;行高将固定为 20 像素无论字体大小如何。对于 line-height: 150%;行高将是元素字体大小的 150%。例如如果字体大小是 16px行高将是 24px16 * 1.5。对于 line-height: 1.5;行高是字体大小的 1.5 倍这是一种更灵活的设置方式因为当字体大小改变时行高会自动调整。
letter-spacing
控制字符之间的间距可以使用不同的单位如像素px、em 等。
p {letter-spacing: 2px;}
h1 {letter-spacing: -1px;}正的 letter-spacing 值会增加字符之间的间距而负的 letter-spacing 值会减少字符之间的间距。
word-spacing
与 letter-spacing 类似但它控制的是单词之间的间距而不是字符之间的间距。
p {word-spacing: 5px;}
h1 {word-spacing: -2px;}正的 word-spacing 值会增加单词之间的间距负的 word-spacing 值会减少单词之间的间距。
背景属性
background-color 属性
该属性设置背景颜色
div {width: 400px;height: 400px;background-color: red;
}background-image属性
设置元素的背景图像
.box2 {width: 200px;height: 200px;background-image: url(1.jpg);
}因为容器的大小没有图片的大小大所以只显示出了一部分
background-repeat属性
该属性设置如何平铺背景图像
值说明repeat默认值repeat-x只向水平方向平铺repeat-y只想垂直方向平铺no-repeat不平铺
.box2 {width: 1000px;height: 500px;background-image: url(1.jpg);background-repeat: repeat-x;
}background-size属性
该属性设置背景图像的大小
值说明length设置背景图片的宽度和高度第一个值宽度第二个值高度如果只是设置一个第二个值 autopercentage计算相对位置区域的白分比第一个值宽度第二个值高度如果只是设置一个第二个值 autocover保持图片纵横比并将图片缩放成完全禮盖背景区域的最小大小contain保持图片纵横比并将图像缩放成适合背景定位区域的最大大小
.box2 {width: 200px;height: 200px;background-image: url(1.jpg);background-size: cover;
}虽然给的容器大小小于图片的大小但通过cover就可以把图片缩小到刚好放入容器中
background-position属性
该属性设置背景图像的起始位置默认值是0% 0%。
值说明left top左上角left center左 中left bottom左下角right top右上角right center右 中right bottom右下角center top顶部居中center center正中心center bottom底部居中x% y%使用百分比设置位置第一个值是水平位置第二个值是垂直位置。 0% 0% 表示左上角100% 100% 表示右下角50% 50% 表示正中心。 例如background-position: 25% 75%; 表示将背景图像的起始位置设置为水平方向上距离左边 25%垂直方向上距离顶部 75% 的位置。xpos ypos使用长度值px、em 等设置位置第一个值是水平位置第二个值是垂直位置。 例如background-position: 10px 20px; 表示将背景图像的起始位置设置为水平方向上距离左边 10 像素垂直方向上距离顶部 20 像素的位置。
.box2 {width: 200px;height: 200px;background-image: url(1.jpg);background-position: right bottom;
}从结果来看当容器大小小于图片的时候由于设置了background-position属性展示的部分为图片的右下角
文本属性
text-align
指定元素文本的水平对齐方式
值描述left文本居左排列默认值right把文本排列到右边center把文本排列到中间
text-decoration
规定添加到文本的修饰下划线、上划线、删除线等
值描述underline下划线在文本的下方添加一条直线。overline上划线在文本的上方添加一条直线。line-through删除线在文本的中间位置添加一条贯穿文本的直线。none无修饰去除文本默认的或之前设置的任何文本修饰效果如链接默认的下划线。blink闪烁效果使文本呈现闪烁的状态该值在现代浏览器中兼容性较差部分浏览器已不支持。underline overline同时添加下划线和上划线在文本的上方和下方都添加一条直线。wavy underline波浪形下划线在文本下方添加一条波浪形状的线。double underline双下划线在文本下方添加两条平行的下划线。
h3 {text-align: center;text-decoration: double underline;text-decoration-color: red;
}text-transform
控制文本的大小写
值描述capitalize定义每个单词开头大写即每个单词的首字母会被转换为大写形式其余字母为小写。uppercase将文本中的所有字母都转换为大写形式。lowercase将文本中的所有字母都转换为小写形式。none不进行大小写转换文本将保持原始的大小写形式。
text-indent
规定文本块中首行文本的缩进
p{text-indent: 2em}表格属性
创建一个表格tabletr3td3{单元格}快捷生成
tabletrtd单元格/tdtd单元格/tdtd单元格/td/trtrtd单元格/tdtd单元格/tdtd单元格/td/trtrtd单元格/tdtd单元格/tdtd单元格/td/tr
/table表格边框
border属性
table,td {border: 1px solid red;
}折叠边框
border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开
表格宽度和高度
width和height属性定义表格的宽度和高度
table,td {border: 4px solid green;
}
table{border-collapse: collapse;width: 500px;height: 300px;
}表格文字对齐
text-align属性设置水平对齐方式向左右或中心
td{text-align:center;}垂直对齐属性设置垂直对齐
td{height:50px;vertical-align:bottom;}表格填充
如果在表的内容控制空格之间的边框应使用td和th元素的填充属性
td { padding:15px;}表格颜色
下面的例子指定th元素的文本和背景颜色
td{text-align:center;background-color:yellow;color:black;
}CSS盒子模型Box Model
概念
CSS 盒子模型是一种用于描述 HTML 元素布局的概念模型它将每个 HTML 元素看作是一个矩形的盒子这个盒子包含了元素的内容content、内边距padding、边框border和外边距margin四个部分。 内容Content 这是盒子的核心部分包含了元素的实际内容如文本、图像或其他 HTML 元素。其大小可以通过 width 和 height 属性来设置。 内边距Padding 是内容区域与边框之间的空间用于在内容和边框之间创建一定的间隔避免内容紧贴边框。可以使用 padding-top、padding-right、padding-bottom 和 padding-left 属性分别设置上、右、下、左内边距也可以使用 padding 属性一次性设置四个方向的内边距。 边框Border 位于内边距和外边距之间围绕着内容和内边距可以为元素添加可见的边界。可以使用 border-width、border-style 和 border-color 属性分别设置边框的宽度、样式和颜色也可以使用 border 属性一次性设置边框的所有属性。 外边距Margin 是盒子与其他元素之间的空间用于控制元素之间的距离。可以使用 margin-top、margin-right、margin-bottom 和 margin-left 属性分别设置上、右、下、左外边距也可以使用 margin 属性一次性设置四个方向的外边距。
以下是一份关于弹性盒子模型flex box的更完善的笔记
弹性盒子模型flex box
定义
弹性盒子是 CSS3 的一种新的布局模式它为元素的布局提供了更加灵活和强大的方式尤其适用于一维布局水平或垂直方向。与传统的布局方式如使用 float 和 position相比弹性盒子模型在响应式设计、对齐和分布元素方面具有更大的优势可以轻松地实现元素的排列、对齐、分配空间等操作使页面布局更加简洁和易于维护。
弹性容器Flex Container
定义使用 display: flex; 或 display: inline-flex; 可以将一个元素定义为弹性容器。 - display: flex; 会将元素变成块级弹性容器它会占据其父元素的整个宽度。 - display: inline-flex; 会将元素变成内联级弹性容器其宽度由内容决定。
.container {display: flex;
}当一个元素成为弹性容器后它的子元素称为弹性项目会按照弹性布局的规则进行排列和布局。
弹性项目Flex Items
定义弹性容器内的子元素就是弹性项目。 属性影响弹性容器的属性会影响弹性项目的布局如 justify-content、align-items 等这些属性会控制弹性项目在容器内的位置、间距和对齐方式。
.container {width:200px;height: 100px;background-color:#555;display: flex;
}
.item {width:50px;height: 50px;margin: 10px;background-color: lightblue;
}div classcontainerdiv classitem/divdiv classitem/divdiv classitem/div
/div没设置弹性盒子 设置了弹性盒子
主轴Main Axis和交叉轴Cross Axis
主轴弹性项目的排列方向就是主轴。可以通过 flex-direction 属性来设置主轴的方向其取值有 row默认从左到右水平排列。row-reverse从右到左水平排列。column从上到下垂直排列。column-reverse从下到上垂直排列。 交叉轴与主轴垂直的方向就是交叉轴。当主轴是水平方向时交叉轴是垂直方向反之亦然。示例代码
.container {display: flex;flex-direction: column; /* 主轴为垂直方向 */
}弹性容器的属性
justify-content
作用用于控制弹性项目在主轴上的对齐方式。取值 flex-start默认将弹性项目对齐到主轴的起始位置。flex-end将弹性项目对齐到主轴的结束位置。center将弹性项目在主轴上居中对齐。space-between将第一个弹性项目放在主轴的起始位置最后一个放在结束位置其他项目均匀分布在它们之间。space-around将弹性项目均匀分布在主轴上在每个项目的两侧有相等的间距。space-evenly将弹性项目均匀分布在主轴上所有间距相等。 示例代码
.container {display: flex;justify-content: center; /* 弹性项目在主轴上居中对齐 */
}align-items
作用用于控制弹性项目在交叉轴上的对齐方式。取值 flex-start将弹性项目对齐到交叉轴的起始位置。flex-end将弹性项目对齐到交叉轴的结束位置。center将弹性项目在交叉轴上居中对齐。baseline将弹性项目按照它们的基线对齐。stretch默认如果弹性项目未设置高度或设置为 auto将拉伸项目以填满交叉轴。 示例代码
.container {display: flex;align-items: flex-end; /* 弹性项目在交叉轴上靠末端对齐 */
}flex-wrap
作用控制弹性项目是否换行。取值 nowrap默认不换行弹性项目将尝试压缩在一行内。wrap当弹性项目在一行内放不下时会换行显示。wrap-reverse当弹性项目在一行内放不下时会换行显示但换行的方向与 wrap 相反。 示例代码
.container {display: flex;flex-wrap: wrap; /* 弹性项目超出容器宽度时换行 */
}弹性项目的属性
flex-grow
作用定义弹性项目的放大比例即当有多余空间时该属性决定了弹性项目如何分配多余的空间。取值默认为 0表示不放大如果设置为正数该项目将按比例分配多余空间。示例代码
.item1 {flex-grow: 1; /* 当有多余空间时该项目会放大 */
}
.item2 {flex-grow: 2; /* 该项目会比 item1 放大的程度更大因为其 flex-grow 值更大 */
}flex-shrink
作用定义弹性项目的缩小比例即当空间不足时该属性决定了弹性项目如何缩小。取值默认为 1表示可以缩小如果设置为 0该项目不会缩小。示例代码
.item1 {flex-shrink: 0; /* 当空间不足时该项目不会缩小 */
}flex-basis
作用定义弹性项目在分配多余空间之前的初始大小。可以设置为具体的长度如 200px或相对值如 30%。示例代码
.item {flex-basis: 200px; /* 弹性项目的初始大小为 200 像素 */
}flex
作用是 flex-grow、flex-shrink 和 flex-basis 的简写属性。示例代码
.item {flex: 1 1 200px; /* 等同于 flex-grow: 1; flex-shrink: 1; flex-basis: 200px; */
}flex-decoration
功能flex-direction 属性用于指定弹性容器Flex Container内弹性项目Flex Items的排列方向也就是确定弹性布局的主轴Main Axis方向。通过设置该属性可以控制弹性项目是水平排列还是垂直排列以及排列的顺序。语法flex-direction: row | row-reverse | column | column-reverse;取值及含义 row默认值弹性项目从左到右水平排列。这是最常见的排列方式适用于水平布局例如在创建一个水平导航栏或一组水平排列的卡片时可以使用该值。row-reverse弹性项目从右到左水平排列。与 row 相反用于实现元素从右向左的水平排列可在某些特殊的布局需求中使用如从右向左的语言环境。column弹性项目从上到下垂直排列。常用于创建垂直的布局结构例如侧边栏或垂直排列的信息列表。column-reverse弹性项目从下到上垂直排列。适用于需要元素从下向上的垂直排列例如一些倒序排列的信息展示。
文档流
文档流是文档中可显示对象在排列时所占用的位置/空间 例如块元素自上而下摆放内联元素从左到右摆放 标准流里面的限制非常多导致很多页面效果无法实现
文档流产生的问题
高矮不齐底边对齐
bodyspan大家好我们一起学前端/spanimg src1.jpg alt
/body在上面这个例子中我们发现文本和图片没有高矮对齐
空格折叠
p大家好我是一个 p标签/p实际的效果是只显示了一个空格
元素无间距
img src1.jpg alt
img src1.jpg alt两张图片之间出现了默认的间隙不是我所预期的
脱离文档流
使一个元素脱离标准文档流有三种方式
浮动绝对定位固定定位
浮动
定义
float属性定义元素在哪个方向浮动任何元素都可以浮动
.div1{float: left;}
.div2{float: right;}浮动的原理
浮动以后使元素脱离了文档流浮动只有左右浮动没有上下浮动
元素向左浮动
脱离文档流之后元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面一层是底层的原页面一层是脱离文档流的上层页面所以会出现折叠现象 设置浮动后上述图片中间有缝隙的问题就解决了。
img {width: 300px;height: 300px;float: left;
}div classbox1/div
div classbox2/div
div classbox3/div正常情况的布局是从上到下 给div标签加上float:left;后就变成了水平排列 常应用于横向的无序列表作为网页顶部导航栏
当容器不足时
当容器不足以横向摆放内容时会在下一行摆放
