CSS简单布局

CSS

是层叠样式表表的简 写,用于美化我们所写的HTML页面

优势：

• 内容与表现分离 网页的表现统一，
• 容易修改 丰富的样式，
• 使得页面布局更加灵活 减少网页的代码量，
• 增加网页的浏览速度，节省网络带宽
• 运用独立于页面的CSS，有利于网页被搜索引擎收录

选择器严格区分大小写，属性和属性值不区分大小写，属性与属性之间使用分号隔开最后一个可以省略如果一个属性有多个属性值，需要使用空格隔开。type属性可以省略

<style type="text/css">
		选择器{
		属性1:属性值;
		属性2:属性值;
		属性3:属性值1 属性值2 属性值3;
		...
		}
<style>

选择器

标签选择器

**类选择器.Class：**类型不是类，是指同一类型，可以重复

**id选择器#id：**唯一存在，尽量不一样。

id选择器只能选一次，类选择器可以选多次

id选择器>类选择器>标签选择器

伪类	标签名：伪类名{声明}
hover	未点击样式
link	点击后的连接样式
visited	鼠标悬浮
ative	鼠标点击未释放

导航栏可通过其实现简单的页面多样展示

复合选择器

选择器复用	作用
E F{}后代选择器	在E标签下的所有F标签
E>F{}子代选择器	在E标签下的一级子类，不能隔代
E+f{}相邻兄弟选择器	F标签紧跟E标签，是相邻的单个
E~F{}通用兄弟选择器	在E标签后面的F标签，是所有位于E之后
EF交集选择器E,F并集选择其
E:first-child	作为父类的第一的子元素E,父类可以为任意元素。
E F:nth-child(n)	选择父级元素E的第n个元素是否为F
E F:first-of-type	选择父元素内具有只等类型的第n个F子元素
E F:first-of-type	选择父级元素E的第n个子元素是F的 ,如果不是则不实现

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZTQs0FQb-1659011808208)(C:\Users\86176\AppData\Local\Temp\1658997220147.png)]

CSS、的继承性

默认情况下，如果一个标签a在另一个标签b内，此标签a就是b标签的子标签，

CSS导入方式

外部样式：

• href URL 规定链接文档位置
• rel 规定当前文档与被链接文档之间的关系。
• type 规定被链接文档的 MIME 类型。 如css还是text样式

内嵌样式： 选择器就是在html页面内head设置样式

行内样式： 在标签内声明style然后定义格式。

行内样式>内嵌样式>外部样式

	<link  rel="stylesheet" href="../css/index.css" type="text/css">

文本样式

用于设置文本类样式

• font-style italic、oblique 和normal
• font-weight： 设置字体粗细light。lighter.。bold。bolder或数字取值100-900
• font-size： 设置字体大小，像素值px
• font-family： 设置字体格式宋体或微软雅黑
• 字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

文本样式：

• text-decoration 文本装饰 underline（下划线）line-through（删除线）overline（上划线）none（什么也没有）可以去除超链接的下划线。
• text-align： 对齐方式 left right center
• text-indent： 缩进方式2em代表两个字符缩进
• line–height： 设置文本行高，行高=标签高度可实现行高居中
• color： 设置字体颜色

	div{
		width: 50px;
		height: 40px;
		line-height: 40px;
		
		text-align: center;
		border: 1px solid red;
	}

背景设置：

• background-color： 背景色
• background-image： 背景图片url（）如果图片过小会自动向左和向下平铺
• background-repeat：设置平铺方式,有四个值,repeat(默认),no­repeat(不平 铺),repeat­x(水平平铺),repeat­y(垂直平铺)
• background­-position： 设置背景定位方式格式为: 水平方向数值 垂直方向数值 , 水平各有left center right ,垂直有top center bottom,也 可以是具体的像素值比如 100px 100px
• background-­attachment： 设置背景的关联方式常用有两个scroll(会随着滚动条 的滚动而滚动),fixed(不会随着滚动而滚动
• background: 背景颜色 背景图像 背景定位 背景不重复显示
• backgrount-size：
  • auto，默认值，是背景保持原样
  • percentage 百分比设置图片大小
  • cover 背景放大扩充到整个元素
  • contain：让背景保持本身的宽高比例

**background: url(img/8466181.jpg) no-repeat;background-size: 100% ;background-position: center center; **

background-image: url()	导入背景图
backgrount-repeat	repeat no-repeat report-x,y平铺
background-size	auto 默认 cover放大填充 contain图像自动调整 percentage使用百分比背景尺寸

盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6F0XfM6H-1659011808209)(C:\Users\86176\AppData\Local\Temp\1659006403195.png)]

border：边框

样式	作用
border-color	颜色
border-width	thin细、medium加粗 或 thick特粗
border-styple	solid实线 dashed虚线 double双边框 dotted点边框 hidden隐藏边框
border-radius	设置弧度为50%边框为圆

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g4z42IdG-1659011808209)(C:\Users\86176\AppData\Local\Temp\1659009087866.png)]

可通过div更好表现

margin外边距 ，可以居中anto

padding内边距，在使用内边距时会对元素空间进行扩容

display

定义元素的属性：

block： 块级元素，该元素前后有换行h1 、 p 、div

inline： 内联元素，没有换行，空间，span 、a 、img

inline-block： 两者特色都有

none; 元素不会显示

实现原理，因为内联元素是根据内容分配空间的，并不会给出换行，而块元素是分配好空间的，也会随内容而进行容量宽展。在测试display;inlink时，通过css设置空间并没有效果

内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立

布局

可以使用内联元素和块元素这一特性，横向布局

浮动float

属性	说明
left	元素左浮动
right	元素右浮动
non’e	默认值，不浮动

如过使用float，需要在前一个元素也添加float

边框塌陷clear

在使用方法时会有一个问题，如果横向排版仍有空间，会继续填充内容通过使用clear:方位‘

left right both none

overflow溢出处理

• 如果是设置空间太小导致内容溢出可通过verflow解决

属性值	说明
visible	默认值，不做操作
hidden	多于内容进行修改
scroll	内容会被修改，但是浏览器会显示滚动条通过滑轮滚动查看溢出内容
auto	内容会被修改，但是可以通过页面滚动查看溢出内容

Position相对定位

属性	作用
static	默认值，没有定位
relative	相对定位 相对自身原来位置进行偏移，偏移设置：top、left、right、bottom
absolute	绝对定位 偏移设置： left、right、top、bottom ，
fixed	固定定位，相对页面位置不变，