一.CSS浮动
1.简介
默认的框是上下移动,CSS浮动可以控制浮动的框向左或者向右移动float属性属性值说明left元素向左浮动right元素向右浮动none默认值,元素不浮动浮动意思是取消原来所占的一行,让浮动标签后面的一个标签样式接上浮动标签的样式
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">.div {/* float: left; *//* margin-left: 100px; */}/* 浮动意思是取消原来所占的一行,让浮动标签后面的一个标签样式接上浮动标签的样式 */#div1 {/* left表示左浮动right表示右浮动none表示不浮动*/float: left;}#div2 {float: left;}#div3 {float: left;}</style></head><body><div id="div1" class="div" style="background-color: red;">芜湖,起飞</div><div id="div2" class="div" style="background-color: yellow;">啊哈,金色传说</div><div id="div3" class="div" style="background-color: aqua;">这把我门就遇到了高手了</div><!-- 清除浮动 --><div id="div4" class="div" style="clear: both;">外币外币,外币巴布</div></body></html>
2.CSS浮动图片
当对图片进行浮动时,图片会取消边框,按照浮动顺序排列;当调整窗口时,图片大小不变,会自动调整位置
<!DOCTYPE html><html><head><meta charset="utf-8"><title>css浮动图片</title><style type="text/css">img{float: left;}</style></head><body><img src="img/girl1.jpg" width="400px" height="300px"><img src="img/girl2.jpg" width="400px" height="300px"><img src="img/girl3.jpg" width="400px" height="300px"><img src="img/girl4.jpg" width="400px" height="300px"></body></html>
3.边框塌陷
作用:清除浮动属性值说明left在左侧不允许出现浮动元素right在右侧不允许出现浮动元素both在左、右两侧不允许浮动元素none默认值。允许浮动元素出现在两侧
<!DOCTYPE html><html><head><meta charset="utf-8"><title>css清除浮动</title><style type="text/css">img {float: left;margin-left: 20px;}#div2{clear: both;}</style></head><body><div id="div1">图片</div><img src="img/girl1.jpg" width="400px" height="300px"><img src="img/girl2.jpg" width="400px" height="300px"><!-- 清除浮动 如果不添加clear,文字会出现在图片右侧--><div id="div2">图片2</div><img src="img/girl3.jpg" width="400px" height="300px"><img src="img/girl4.jpg" width="400px" height="300px"><img src="img/girl5.jpg" width="400px" height="300px" ></body></html>
4.display属性
属性值说明block块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符inline内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符inline-block行内块元素，元素既具有内联元素的特性，也具有块元素的特性none设置元素不会被显示块元素排在一起有两种方法：inline-blockfloat
<!DOCTYPE html><html><head><meta charset="utf-8"><title>display属性</title><style type="text/css">p{background-color: red;display: inline;}</style></head><body><p>芜湖起飞</p><p>外币外币</p></body></html>
二.CSS属性
1.字体的设置
1.font-family设置字体形式,如黑体隶书楷书等2.font-size:绝对尺寸/关键字/相对尺寸/百分比关键字:xx-small(极小),x-small（较小）,smaller,small（小）,medium（标准）,large（大）3.font-style 设置字体的样式font-style 设置字体的样式（设置字体是否为斜体字）normal----正常显示字体italic---斜体字oblique--歪斜体（倾斜角度大一点）4.font-weight 设置字体的加粗取值：normal ---- 正常显示bold ----粗体（数字700粗细值）bolder ---加粗lighter ---细体（比正常字体稍微细一点）number ----数字型（一般整百设置，有9个级别（100----900）数字取值越大越粗）5.text-shadow设置字体的阴影从左到右依次为阴影的左右距离,上下距离,阴影范围,阴影颜色6.font-variant 设置字体的变体设置字体是否显示为小型的大写字母主要用于设置英文字体normal --正常字体small-caps 表示英文字母显示为小型的大写字母
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">body{color: red;font-family: 楷体;font-style: normal;font-weight: bold;/* text-shadow设置字体的阴影 *//* 左右位置 上下位置 阴影范围 阴影颜色 */text-shadow: 1px 1px 5px aqua;}h2{/* font-size设置字体大小 */font-size: 100px;color: #000000;font-style: italic;font-weight: normal;}div{font-size: x-large;font-style: oblique;font-weight: lighter;}#div2{font-variant: small-caps;}#div3{font-variant: normal;}</style></head><body><h1>芜湖起飞</h1><h2>外币外币</h2><p>啊哈,金色传说</p><div id="div1">这把我们就遇到了高手了</div><div id="div2">HelloWorld!</div><div id="div3">buffterflaay</div></body></html>
2.颜色的设置
1.color 设置颜色2.background-color设置背景颜色3.background-image设置背景图片
<!DOCTYPE html><html><head><meta charset="utf-8"><title>颜色的设置</title><style type="text/css">#div1{color:red;}#div2{background-color: #FFD700;}.div{background-image: url(img/girl1.jpg);}</style></head><body><div id="div1">外币外币,外币巴布</div><div id="div2">飞吧</div><div id="div3" class="div">芜湖</div><div id="div4" class="div">起飞</div></body></html>
3.背景的设置
(1)背景的颜色+图片+尺寸
1.background-color设置背景颜色2.background-image设置背景图片3.background-size设置背景图片的尺寸,第一个参数表示左右拉伸,第二个参数表示上下拉伸4. background-repeat设置背景图片是否重复设置背景图片总是在水平和垂直方向重复显示铺平整个网页。repeat 背景图片在水平和垂直方向平铺repeat-x 背景图片在水平方向平铺repeat-y 背景图片在垂直方向平铺no-repeat 背景图片不平铺5.background-attachment设置背景图片是否随着滚动条的滚动而滚动scroll ---表示背景图片随着滚动条的移动而移动fixed---表示背景图片固定在页面上不动，不随滚动条移动而移动
<!DOCTYPE html><html><head><meta charset="utf-8"><title>背景的设置</title><style type="text/css">body{background-image: url(img/girl3.jpg);/* 是否随着滚动条的滚动而滚动 */background-attachment: scroll;/* 设置图片不平铺 */background-repeat: no-repeat;/* 设置图片尺寸 */background-size: 800px 1800px;}/* 字出现在图片上,且字和图片一起随着滚动条的滚动而滚动 */#div1{height: 50rem;}</style></head><body><div id="div1">芜湖</div></body></html>
(2)背景图片的位置
background-position:关键字 百分比 位置说明top left0% 0% 左上位置top center 50% 0% 靠上居中top right 100% 0% 右上位置left center0% 50% 靠左居中center center50% 50% 正中位置right center100% 50% 靠右居中bottom left0% 100% 左下位置bottom center 50% 100% 靠下居中bottom right100% 100% 右下位置
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">#div1{width: 1400px;height: 1100px;background-image: url(img/bb.png);background-repeat: no-repeat;border: 1px #00FFFF solid;/* 设置图片的位置 */background-position: right center;}</style></head><body><div id="div1" style="height: 800px;"></div></body></html>
4.边框的设置
(1)边框的基本设置
边框线条的粗细边框的颜色 边框的粗细border: 1px black solid; 1.边框的宽度border-width基本语句：border-widthborder-top-width上宽border-bottom-width下宽border-left-width左宽border-right-width右宽取值；thin ----细边框medium ---中等边框thick--粗边框长度---数字2.边框的颜色border-colorborder-top-colorborder-bottom-colorborder-left-colorborder-right-color3.边距border边距指的是设置网页中某个元素的四边和网页中其他元素之间的空白距离上边距 margin-top下边距 margin-bottom左边距 margin-left右边距 margin-right
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">#div1 {width: 300px;height: 400px;/* border: 1px red solid; */border-width: 10px;border-color: red;border-style: solid;/* 上边框的宽 */border-top-width: 1px;/* 下边框的颜色 */border-bottom-color: #FFD700;/* 左边框的格式 */border-left-style: none;/* 上边距 */margin-top: 100px;}</style></head><body><div id="div1"></div></body></html>
(2)边框的圆角和阴影
border-radius设置边框圆角,注意先把边框设置后再设置圆角div { border:2px solid; border-radius:25px; }box-shadow设置边框阴影
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">#div1{width: 300px;height: 400px;border: 1px darkred solid;background-image: url(img/girl2.jpg);background-repeat: no-repeat;/* 设置边框的圆角 */border-radius: 10px;/* 设置边框的阴影 */box-shadow: 1px 1px 1px #8B0000}</style></head><body><div id="div1"></div></body></html>
(3)内边距
用来设置边框和其内部的元素之间的空白距离上边距 padding-top距离顶部的距离下边距 padding-bottom左边距 padding-left右边距 padding-right注意:添加距离后,会把原有的边框进行扩大如果想要不扩大原有的边框,通过设置box-sizing为:border-box即可
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">#div1{width: 400px;height: 300px;border: 1px #000000 solid;/* 外边距 */margin-top: 100px;/* 内边距 */padding-left: 100px;padding-top: 100px;/* 不扩大原有的边框 */box-sizing: border-box;}</style></head><body><div id="div1">芜湖,起飞</div></body></html>
5.CSS对文字的排版
1.letter-spacing,调整字符间距,用来控制字符之间的间距，这个间距实际上就是在浏览器中所显示的字符间的空格距离。取值：normal ---表示正常显示（默认）长度--可以使用负数，带上单位单位px(像素)2.添加下划线+删除线等text-decoration属性的取值：underline----添加下划线overline---添加上划线line-through--添加删除线blink---添加闪烁效果（只能在Netscape的浏览器中正常显示）none--没有任何的修饰3.文本的对齐方式text-align用来控制文本的排列和对齐方式属性的取值：left--左对齐right--右对齐center--居中对齐justify--两端对齐
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">#div1{/* letter-spacing,调整字符间距 */letter-spacing: 2px;/* 添加下划线 *//* text-decoration: underline; *//* 添加删除线 */text-decoration: line-through;/* 文本的对齐方式 */text-align: center;}</style></head><body><div id="div1">出题人一到店，所有喝酒的人便都看着他笑，有的叫道，“出题人，你又出景点了！”他不回答，对柜里说，“温两碗酒，要一叠景点报告。”便排出九张试卷。他们又故意的高声嚷道，“你一定又欺负高考考生了！“出题人睁大眼睛说，“你怎么这样凭空污人清白……”“什么清白？我昨天亲眼见你偷偷溜进胡夫金字塔，被巴耶克吊着打。”出题人便涨红了脸，额上的青筋条条绽出，争辩道，“偷入景点不能算偷……潜入！……读书人的事，能算偷么？”接连便是难懂的话，什么“葛军我大哥”，什么“巴黎圣母院”之类，引得众人都哄笑起来：店内外充满了快活的空气。</div></body></html>
6.字母大小写转换
text-transform: uppercase;转换为大写text-transform: lowercase;转换为小写
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">#div1{/* text-transform: uppercase; */text-transform: lowercase;}</style></head><body><div id="div1">With the rapid development of computer technology, information security has become a major problem in thedevelopment of the Internet. Secret sharing is an important guarantee mechanism to ensure information security. Itcan share secrets among a group of participants and provide a good security mechanism for the confidentiality of thekey, so it has been widely used.</div></body></html>
7.段落的设置
text-indent 用来控制每个段落的首行缩进的距离。属性取值：长度（数字）带上单位百分比相对于上一级元素的宽度em 倍数对p标签中的文本进行首行缩进line-height: 2em;设置行高
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">#p1{/* 首行缩进两个字符 */text-indent: 2em;}#p2{/* 设置行高 */line-height: 2em;}</style></head><body><p id="p1">美国参众两院于 1948 年 6 月同意美国加入世卫组织时的联合决议案（jointresolution）中其实有相关规定。</p><p id="p2">决议案的第四条款提到：因应世卫组织章程没有关于退会之条文，美国保留退出组织之权利，但需在一年前提出（one yearnotice），且美国应已付清对世卫组织的一切债务。这是当时美国加入世卫组织时，认可的条款。也就是说即使美国国会应特朗普要求，同意通过退出世卫组织，也至少是7月以后。并且付清对世卫组织的一切债务。美国人在世卫组织有一万多员工，世卫组织的费用都是用来发工资，做研究烧钱。其中很大一部分是被美国人拿走了，包括工资和研发经费。不可能这么轻易一句话就退出，我无法猜测如果美国真的这么轻飘飘的拍拍屁股走人，世界会怎么看待美国加入的组织，后面大家都会后怕，你美国人来拿工资，烧研发经费，又不付清债务就跑了。</p></body></html>
