Java阶段三Day02

Java阶段三Day02

CSS

三大特性

• 继承性：指元素可以继承上级元素文本和字体相关的样式，部分标签自带的效果不受继承影响，比如超链接的字体颜色
• 层叠性：指一个元素可以层叠很多不同的样式，多个选择器有可能选择到同一个元素，如果添加的样式不同，则样式全部层叠生效，如果添加的样式相同则由选择器的优先级决定哪个生效
• 优先级：作用范围越小，优先级越高
  • !important > 内联样式 > ID选择器 > 类选择器、属性选择器和伪类选择器 > 标签名选择器

常用样式

颜色赋值方式

三原色： RGB （Red Green Blue）， 每一种颜色的取值范围 0~255

五种赋值方式：

• 颜色单词赋值： red / blue / yellow / green…
• 6位16进制赋值： #ff0000
• 3位16进制赋值： #f00
• 3位10进制赋值： rgb(255,0,0)
• 4位10进制赋值： rgba(255,0,0,0-1) a=alpha 透明度 值越小越透明

背景图片相关样式

样式	介绍
background-image:url(“路径”);	设置背景图片
background-size:200px 300px;	设置背景图片尺寸
background-repeat:no-repeat;	禁止重复
background-position: 100px 200px;	设置背景图片的位置
background-position: 50% 50%;	设置背景图片的位置

文字和字体相关样式

样式	介绍
text-align:right/center;	水平对齐方式
text-decoration:overline / underline / linethrough / none;	上划线 / 下划线 / 删除线 / 去掉修饰
line-height:20px;	设置行高，单行可以实现垂直居中，多行可以控制行间距
text-shadow:颜色 x偏移值 y偏移值 浓度(值越小越清晰);	文本阴影及模糊效果
font-size:20px;	字体大小
font-weight:bold / normal;	加粗 / 去掉加粗
font-style:italic;	设置斜体
font-family:xxxx,xxx,xxx;	设置字体
font: 20px xxx,xxx,xxx;	设置字体大小+字体

元素的显示方式 display

• block： 块级元素的默认值，显示特点： 独占一行，可以修改元素的宽高，包括：h1~h6、p、div
• inline： 行内元素的默认值，显示特点： 共占一行，不能修改元素的宽高，包括： span、b、i、s、u、a
• inline-block： 行内块元素的默认值，显示特点： 共占一行，并且可以修改元素宽高，包括： input、img
• none： 隐藏元素

注：行内元素的宽高是不能修改的，必须改成其它显示方式才可以

盒子模型

盒子模型是指在网页设计中，将每个 HTML 元素看作是一个矩形的盒子，该盒子由内容区域content、内边距padding、边框border和外边距margin组成。这个模型可以帮助开发者理解和控制元素的布局、大小和位置

• 作用：通过盒子模型相关的样式控制元素的显示效果
• 控制效果：
  • content内容区域：用来控制元素的显示大小
  • border边框：用来控制边框的效果
  • margin外边距：用来控制元素的显示位置
  • padding内边距：用来控制元素内容的位置

Content内容区域

• 控制元素的显示大小
• 相关样式： width / height
• 赋值方式：1. 像素 2. 上级元素的百分比
• 行内元素是不能修改宽高的，如果必须要修改，需要将元素的显示方式改成块级block 或 行内块inline-block

border边框

• 赋值方式：
  • border-left / right / top / bottom: 粗细 样式 颜色; 单独某一个方向添加边框
  • border: 粗细 样式 颜色; 四个方向添加边框
• border-radius:10px ; 设置圆角，值越大越圆
• 默认情况下边框会影响元素显示的大小，如：width:200，border:10 元素实际占用宽度=200+10*2

margin外边距

• 赋值方式：
  • margin-left / right / top / bottom:10px; 单独某一个方向赋值
  • margin:10px; 四个方向赋值
  • margin:10px 20px; 上下10 左右20
  • margin:10px 20px 30px 40px; 上右下左赋值，顺时针
• 行内元素上下外边距无效，左右相邻彼此添加外边距，两者相加
• 外边距塌陷：
  • 兄弟元素上下相邻，彼此添加外边距，取最大值
  • 父子元素上边缘重叠时，添加外边距取最大值，会导致父子元素粘连在一起，给父元素添加overflow:hidden样式解决

padding内边距

• 控制元素内容的位置
• 赋值方式：和外边距类似
  • padding-left / right / top / bottom:10px; 单独某一个方向赋值
  • padding:10px; 四个方向赋值
  • padding: 10px 20px; 上下10 左右20
  • padding: 10px 20px 30px 40px; 上右下左赋值，顺时针
• 给元素添加内边距默认情况下会影响元素的显示范围，给元素添加box-sizing:border-box; 后则不再影响

部分标签自带盒子模型中的某些样式

• body 自带8个像素的外边距
• 段落标签p、列表标签和内容标题h1~h6 自带上下的外边距
• 文本框 自带边框和内边距
• 列表标签 自带外边距和内边距

定位

CSS定位方式

• CSS 定位指的是通过 CSS 样式表来定义 HTML 元素在网页中的位置和布局
• 常用的定位方式包括：
  • 静态定位
  • 相对定位
  • 绝对定位
  • 固定定位

静态定位

• position : static;
• 默认的定位方式，又称为文档流定位
• 特点：块级元素从上往下依次排列，行内元素从左向右依次排列，通过外边距控制元素的位置
• 默认情况下无法实现元素层叠效果

相对定位

• position : relative;
• 特点：元素不脱离文档流（不管元素显示到什么位置，仍然占着原来的位置，后面的元素不会顶上来）元素通过 left / right / top / bottom 样式相对于初始位置做偏移
• 应用场景：当元素需要层叠显示时，静态定位是无法实现的，通过相对于定位可以实现层叠，当需要对某一个元素的显示位置进行微调时使用

绝对定位

• position : absolute;
• 特点：元素脱离文档流（不占原来的位置，后面的元素会顶上来）通过 left / right / top / bottom 相对于窗口（默认）或某一个上级元素做偏移
• 应用场景：当需要层叠显示，并且需要让元素相对于某个上级元素做位置偏移时使用

固定定位

• position : fixed;
• 特点：元素脱离文档流，通过 left / right / top / bottom 相对于窗口做位置偏移
• 应用场景：当需要将元素固定在窗口的某个位置时使用

浮动

• float : left/right
• 特点：元素脱离文档流，从当前所在行向左或向右浮动，当撞到上级元素边缘或其它浮动元素时停止
• 多个浮动元素一行装不下时会自动折行，折行时有可能被卡住
• 当元素的所有子元素全部浮动时，自动识别的内容高度为0，会导致后面的元素顶上来出现显示异常，给元素添加overflow:hidden 解决此问题
• 应用场景：将纵向排列的多个元素，改成横向排列时使用

其他样式

显示层级和溢出设置

• 显示层级
  • 当元素为非static 定位，出现层叠时，可以通过z-index设置显示层级，值越大显示越靠前
• 溢出设置
  • hidden：隐藏
  • visible：显示
  • scroll：滚动显示

行内元素垂直对齐方式vertical-align

• top：上对齐
• middle：中间对齐
• bottom：下对齐
• baseline：基线对齐