-
三、CSS中级
一、元素显示模式
- 元素(标签)以什么方式进行显示，比如div自己占一行，一行放多个span
1. 块元素
- 独占一行
- 高度，宽度，外边距以及内边距可调
- 宽度默认是容器(父级宽度)的100%
- 是一个容器及盒子，里面可以放行内或块元素
- 文字类的元素内不能使用块级元素，比如p标签和h标签不能放其他块级元素
<h1>~<h6> <p> <div> <ul> <ol> <li>- 1
- 2
- 3
- 4
- 5
- 6
2. 行内元素/内联元素
- 相邻行内元素在一行上，一行可以显示多个
- 高，宽直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
<a> <strong> <b> <em> <li> <del> <s> <ins> <u> <span>: 最典型的行内元素- 1
- 2
- 3
- 4
- 5
- 6
- 7
3. 行内块元素
- 和相邻行内元素在一行上，但是会有空白缝隙，一行可以显示多个
- 默认宽度就是它本身内容的宽度
- 高度，行高，外边距以及内边距都可以控制
# 同事具有块元素和行内元素的特点 <img/> <input/> <td>- 1
- 2
- 3
- 4
4. 显示模式的转换
- 特殊情况下，我们需要元素模式的转换：一个模式的元素需要另外一种模式的特性
<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <style> a { width: 200px; height: 50px; background-color: green; /*把行内元素a转换为块级元素*/ display: block; } div { width: 200px; height: 50px; background-color: red; /*把块级元素转换为行内元素*/ display: inline; } /*转换为行内块元素： display: inline-block;*/ style> head> <body> <a href="#">Nike乔丹a> <div>我是块级元素div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
5. 单行文字垂直居中
- css没有提供文字垂直居中的代码
- 解决方案：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中 line-height
行高的上空隙和下空隙把文字挤到中间了 1. 如果行高小于盒子高度，文字会偏上 2. 如果行高大于盒子高度，文字会偏下- 1
- 2
- 3
二、CSS属性
1. 背景图片
<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <style> div { width: 2000px; height: 2000px; /*1. 分开写法*/ background-color: black; /*背景颜色：默认为透明：transparent*/ background-image: url("1.png");/*背景图片： none｜url(---)*/ background-repeat: no-repeat; /*背景平铺, 默认平铺： no-repeat, repeat-x, repeat-y */ /*图片位置： 1. 如果用方位名词 1.1 则前后顺序无关： background-position: right top 1.2 如果只写一个，则另外一个默认居中center 2. 如果用精确数字，则按照x y 2.1 按照x和y来进行精确单位顺序 2.2 如果只制定一个数值，则认为是x，另一个默认垂直居中 3. 混合单位： 第一个值是x，第二个是y */ background-position: 50px 20px; /*背景固定： 背景图像是否固定或者随页面的其余部分滚动 fixed, scroll */ background-attachment: scroll; /*2. 复合写法： 顺序不影响*/ /*background: black url("1.png"), no-repeat, fixed, 50px 20px;*/ } style> head> <body> <div> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
2. CSS特性
2.1 层叠性
<head> <meta charset="UTF-8"> <title>Titletitle> <style> /*1. 层叠性 1.1 就近原则覆盖 1.2 只会覆盖重叠样式*/ div { height: 50px; width: 50px; background-color: red; } div { background-color: black; } style> head> <body> <div> div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
2.2 继承性
- 子标签会继承父标签样式
- 只是某些样式，比如文本颜色和字号， text- font- line- color属性
<head> <meta charset="UTF-8"> <title>Titletitle> <style> /*1.5: 行高的一种继承方式*/ body { font: 12px/1.5 "Microsoft YaHei UI"; } /*子元素继承了父元素 body的行高1.5: 14px * 1.5 */ div { font-size: 30px; } style> head> <body> <div> Hello div> body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
2.3 优先级
a. 基础选择器
- 同一个元素，指定了多个选择器，就会存在优先级的问题
<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <style> div { color: red !important; } .erick { color: aqua; } style> head> <body> <div class="erick"> Hello div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
b. 复合选择器 – 权重叠加
- 复合选择器，会将基本选择器的权重进行叠加
<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <style> li { color: red; } /*复合选择器： 会对各个部分的基本选择器进行叠加，从而优先级更高 1. 叠加：可以叠加，但是不会进位*/ ul li { color: green; } style> head> <body> <ul> <li>nihaoli> <li>nihaoli> ul> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
三、盒子模型
- 先准备好相关的网页元素，网页元素基本都是盒子box
- 利用css设置好盒子样式，然后摆放到相应位置
- 给盒子里面填充内容
# 盒子模型 - css盒子模型本质是一个盒子，封装周围的html元素 - 包括：边框，外边距，内边距，实际内容- 1
- 2
- 3
1. 边框border
div { width: 500px; height: 500px; /*复合写法： border：1px solid red 没有顺序*/ /*边框宽度*/ border-width: 10px; /*边框样式: solid, */ border-style: dashed; /*边框颜色：*/ border-color: #ff6c37; /*可以单独为边框的某个方向进行设置*/ border-top: 3px solid black; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 细线表格
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <style> table { width: 500px; height: 250px; } table, td, th { border: 1px solid red; /*合并相邻边框*/ border-collapse: collapse; font-size: 20px; text-align: center; } style> head> <body> <table> <thead> <tr> <th>nameth> <th>addressth> <th>ageth> tr> thead> <tbody> <tr> <td>lucytd> <td>shanxitd> <td>20td> tr> <tr> <td>jacktd> <td>shanghaitd> <td>40td> tr> tbody> table> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 边框会影响盒子的实际大小
- 测量时候，要注意实际盒子大小和边框大小
<head> <meta charset="UTF-8"> <title>Titletitle> <style> div { height: 200px; width: 200px; /*边框： 会增大盒子大小，实际为盒子大小加边框大小*/ border: 200px green solid; } style> head> <body> <div> div> body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
2. 内边距
- 盒子内容和盒子边的距离
- 内边距会影响盒子的大小，实际盒子的大小=盒子大小+内边距
- 一般为了保证做出来的效果图和样本一样，通过减小盒子的大小，加上内边距，加上外边框，从而等于效果图中的盒子大小
<head> <meta charset="UTF-8"> <title>Titletitle> <style> div { height: 200px; width: 200px; border: 20px green solid; /*盒子里面内容和盒子边框之间的距离： 可以设置四个方向不同的距离*/ padding-left: 20px; } style> head> <body> <div> 你好 div> body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 案例：盒子里面字数不一样多，给盒子padding比较合理
- 如果盒子本身没有制定width/height，则此时padding不会撑开盒子大小
3. 外边距
-
相关阅读:
D. 1D Eraser
高薪程序员&面试题精讲系列129之你熟悉哪些版本控制工具？你知道哪些Git命令？fetch与pull有哪些区别？
网站安全防护措施有哪些
Docker Swarm 维护模式
Qt事件的详细介绍和原理
自媒体短视频怎么提高播放量？从这三个方面入手
mybatis参数为0识别为空字符串的查询处理
51单片机光照强度检测自动路灯开关仿真( proteus仿真+程序+报告+讲解视频）
uniapp——项目day04
Mycat2.0搭建教程
- 原文地址：https://blog.csdn.net/weixin_43374578/article/details/125807551
