CssFoundation

置顶 已于 2023-04-08 19:34:38 修改
阅读量317 收藏
点赞数 1
文章标签： html css 前端
于 2023-03-07 01:44:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59883382/article/details/129374049
版权
本文详细介绍了CSS的基础知识，包括引入样式、选择器、颜色赋值、背景设置、文本样式、字体样式、元素显示方式、盒子模型、CSS的三大特性以及定位方式。内容涵盖内联、内部、外部样式、各种选择器的使用、颜色表示法、背景属性、文本和字体属性、display属性、盒子模型详解、定位方式（static、relative、absolute、fixed）及其应用场景。适合前端初学者学习。
摘要由CSDN通过智能技术生成

CssFoundation


Cascading Style Sheet, 作用: 美化页面, 相当于装修

一. 引入CSS样式

1.1 内联样式kj

  • <h1 style="color: red">内联样式1</h1>
<h1 style="color: red">内联样式2</h1>

1.2 内部样式

  • 选择h2 标签
    <head>
    <style>
        h2{
            color: blue;
        }
    </style>
</head>

<body>
    <h2>内部样式1</h2>
    <h2>内部样式2</h2>
</body>

1.3 外部样式

  1. html文件中 head标签 中 引用css文件
    ref 引入文件和页面的关系 href 文件名
    <link rel="stylesheet" href="my.css">
  2. html页面编写代码
    <h3>外部样式1</h3>
<h3>外部样式2</h3>
  3. 编写my.css
    h3{
    color: green;
}

1.4 引入方式总结

样式表优点缺点使用情况控制范围
行内样式表书写方便，权重高结构样式混写较少控制一个标签
内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面
外部样式表完全实现结构和样式相分离需要引入最多控制多个页面

1.5 CSS书写顺序

1.5.1 布局定位属性

  • display / position / float / clear / visibility / overflow(建议display第一个写，毕竟关系到模式)

1.5.2 自身属性

  • width / height / margin / padding / border / background

1.5.3 文本属性

  • :color / font / text-decoration / text-align / vertical-align / white- space / break-word

1.5.4 其他属性

  • content / cursor / border-radius / box-shadow / text-shadow / backgroundlinear-gradient .

1.6 页面整体思路

  1. 必须确定页面的版心（可视区），我们测量可得知
  2. 分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则.
  3. 一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置.页面布局第二准则
  4. 制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要.
  5. 所以,先理清楚布局结构,再写代码尤为重要.这需要我们多写多积累

二. 选择器

用来查找元素的, 找到之后才能添加样式

2.1 标签选择器

标签名{样式代码}

  • 通过标签的名称选择页面中所有同名元素
    h3{
	color: green;
}

2.2 id选择器

#id{样式代码}

  • 通过页面中元素的id选择元素, 元素的id是唯一标识不能重复
    <h4 id="id01">id选择器</h4>
#id01{
	color: coral;
}

2.3 类选择器

class{样式代码}

  • 如果需要选择多个不相关的元素, 可以给多个元素添加相同的class属性值,然后通过类选择器进行选择
    <h4 class="class01">id选择器</h4>
.class01{
	color: green;
}

2.4 分组选择器

div,#id,.class{样式代码}

  • 将多个选择器合并成一个选择器
    <h5>分组选择器</h5>
<h5 id="fz">分组选择器</h5>
<h5 class="fz">分组选择器</h5>
h5,#fz,.fz{
        background-color: aqua;
}

2.5 属性选择器

标签名[属性名=‘值’]{样式代码}

  • 通过元素的属性选择元素
    <h4 id="id01">id选择器</h4> <br>
<h4 class="class01">id选择器</h4>

input[type='text']{
        background-color: coral;
    }
    input[type='password']{
        background-color: antiquewhite;
    }

2.6 任意元素选择器

*{样式代码}

  • 选取页面中所有标签
    *{
	background-color: aqua;
	border: 1px solid red;
}

2.6.1 选择器练习

通过内部样式实现以下功能

  1. 把张学友改成绿色
  2. 把刘德华和悟空改成蓝色
  3. 修改取经3人和刘备的背景为黄色
  4. 修改提交按钮的背景为红色，自定义按钮的字为粉色
  5. 给所有元素添加红色的边框
  • html
    <body>
    <ul>
        <li id="id01">张学友</li>
        <li class="class02">刘德华</li>
        <li class="class02">郭富城</li>
    </ul>
    <h1 class="class03">悟空</h1>
    <h1 class="class03">八戒</h1>
    <h1 class="class03">沙僧</h1>
    <h2 class="class03">刘备</h2>
    <input type="submit">
    <input type="button">
</body>
  • css
    	#id01{
        color: green;
    }
    .class02{
        color: blue;
    }
    .class03{
        background-color: yellow;
    }
    input[type='submit']{
        background-color: red;
    }
    input[type='button']{
        color: azure;
    }
    *{
        border: 1px solid red;
    }

2.7 子孙后代选择器

子孙后代选择器: 通过元素和元素之间的关系匹配元素

  • HTML
    <body>
<p>p2</p>

<div>
  <p>p3</p>
</div>

<div>
    <p>p4</p>
    <div>
        <p>p5</p>
    </div>
</div>
</body>

2.7.1 后代选择器 (空格)

格式: body div div p{样式代码}

  • 匹配body里面的div里面的div里面的所有p(包括后代)
    body div div p{
	color: red;
}

2.7.2 子元素选择器 (>)

body>div>div>p{样式代码}匹配body里面的div里面的p子元素(不包括后代)

  • css
    	body>div>div>p{
        color: red;
}

2.8 伪类选择器

伪类选择器: 此选择器选择的是元素的状态,元素状态包括: 未访问,访问过状态,悬停状态,点击/激活状态

  • html
    <a href="https://www.baidu.com">百度</a>
<a href="https://www.baidu.com">京东</a>
<a href="https://www.baidu.com">淘宝</a>

2.8.1 link 未访问

  • 未访问
     a:link{
        color: red;
}

2.8.2 visited 访问过

  • 访问过
    a:visited{
    color:
}

2.8.3 hover 悬停

  • 悬停
    a:hover{
        color: yellow;
}

2.8.4 active 点击

  • 点击
    a:active{
        color: blue;
}

2.8.2 练习

通过内部样式实现以下效果

  1. 关羽绿色
  2. 张飞和苹果黄色
  3. 文本框和所有水果背景红色
  4. p2字体粉色
  5. p2和p3背景黄色
  6. 腾讯官网未访问绿色,访问过红色悬停黄色,点击粉色
  • html
    <body>
<ul>
    <li>刘备</li>
    <li id="gy">关羽</li>
    <li class="hs">张飞</li>
</ul>

<p>香蕉</p>
<p class="hs">苹果</p>

<input type="text">
<input type="password">

<div>
    <p>p1</p>
    <div><p>p2</p></div>
    <div><div><p>p3</p></div></div>
</div>
<a href="http://www.qq.com">腾讯官网</a>
</body>
  • css
       	#gy{
        color: green;
    }
    .hs{
        color: yellow;
    }
    input[ype='text'],body>p{
        background-color: red;
    }
    body>div>div>p{
        color: azure;
    }
    div div {
        background-color: yellow;
    }
    a:link{
        color: green;
    }
    a:visited{
        color: red;
    }
    a:hover{
        color: yellow;
    }
    a:active{
        color: azure;
    }

2.9 选择器总结

基础选择器作用特点使用情况用法
标签选择器选出所有相同的标签不能差异化选择较多p {color: red;}
类选择器选出一个或多个标签可以根据需求选择非常多.red {color: red;}
id选择器一次只能选择一个标签id属性只能在HTML文档中出现一次一般和js搭配使用#nav {color: red;}
通配符选择器选择所有的标签选择的太多，有部分不需要 特殊情况使用*{color: red;}

三. 颜色赋值

三原色RGB RedGreenBlue , 每种颜色的取值范围0-255

3.1 颜色单词赋值

  • red
  • green
  • blue
  • yellow
  • pink
  • …

3.2 6位 16进制

  • #ff 00 00

3.3 3位 16进制

  • #f 0 0

3.4 3位10进制

  • rgb(255,0,0)

3.5 4位10进制

  • rgba(255,0,0,0-1) a=alpha 透明度 值越小越透明

四. background 背景设置

4.1 background-color 背景颜色

  • background-color设置颜色为purple
    background-color: purple;

4.2 background-image 背景图片

  • 设置图片
    background-image: url("a.png");

4.4 background-size背景大小

  • length 设置宽高
    	background-size: 100px 100px;
  • contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
    	background-size: contain;

4.5 background-repeat 禁止重复

  • no-repeat
    background-repeat: no-repeat;
  • 属性表
    属性值作用
    repeat背景图片在纵向和横向上平铺（默认）
    no-repeat背景图片不平铺
    repeat-x背景图片在横向上平铺
    repeat-y背景图片在纵向上平铺

4.6 background-position 背景图片偏移背景位置

  • 根据像素偏移
    background-position: 20px 50px;
  • 根据百分比位置偏移
    background-position: 50% 50%;

4.6.1 属性表

  • 属性
    参数值说明
    lenght百分比数
    positiontop/center/bottom/left/center

4.7 background 复合写法

background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

  • 复合写法
    background: transparent url(url) repeat-y fixed top;

五. text 文本样式

5.1 text-align 水平对齐方式

行内元素 和 文本居中

  • 水平居中
    text-align: center;
  • 左对齐
    text-align: left;
  • 右对齐
    text-align: right;

5.2 text-decoration 文本修饰(线条)

  • 删除线
    text-decoration: line-through;
  • 上划线
    text-decoration: overline;
  • 下划线
    text-decoration: underline;
  • 无文本修饰 可去掉超链接的下划线
    text-decoration: none;

5.3 text-shadow 文本阴影

  • 文本阴影:颜色 x偏移值 y偏移值 模糊值(值越小,越清晰)
          text-shadow: green -5px 5px 1px;

5.4 line-height 行高

  • 行高 若只有一行可以实现垂直居中
          line-height: 40px;

5.5 text-indent 文本首行缩进

em是一个相对单位，是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小

  • 像素
        text-indent: 20px;
  • 相对当前字号
    text-indent: 2em;

5.6 文本属性总结

  • 属性表
    属性表示注意点
    color文本颜色通常使用16进制书写
    text-align文本对齐设定文本的水平对齐格式
    text-indent文本缩进首行缩进2字符：2em；
    text-decoration文本修饰下划线：underline；取消下划线：none
    text-height行高控制行间距

六. font 字体样式

6.1 font- size 字体大小

  • font-size: 20px;

6.2 font-weight 加粗

  • 加粗
    font-weight: bold;
  • 取消加粗
    font-weight: normal;
  • 值说明
    属性值说明
    normal默认值（不加粗）
    bold加粗
    bolder特加粗
    lighter细体
    100-900400等同于normal，700等同于bold，注意这个数字后面不加单位

6.3 font-style 斜体

  • 斜体
    font-weight: italic;
  • 属性值
    属性值说明
    normal默认值 浏览器会显示标准的字体样式
    italic浏览器会显示斜体的样式

6.4 font-family 设置字体

font-family:字体1,备用字体1,备用字体2

  • 方式1 cursive字体
    font-family: cursive;
  • 方式2 字体大小+字体设置
    font: 30px cursice;

6.5 font 总结

属性表示注意点
font-size字号通常使用px 像素，一定要写上单位
font-family字体实际开发中，团队约定字体
font-weight字体粗细blod，加粗，数值700；normal，不加粗，数值是400
font-style字体样式italic，斜体；normal，不倾斜
font字体连写1.顺序；2.字号和字体必须保留

6.6 文本和字体相关练习

文本和字体相关练习

  1. 刘德华 宽度100 高度30 绿色背景红色字体 横向和纵向居中
  2. 苹果和香蕉 字体大小25px 斜体
  3. 冰箱去掉加粗 蓝色阴影 方向是左下 浓度3
  4. 洗衣机添加下划线
  5. 百度去掉下划线字体加粗 字体大小20px
  • html
    <div id="ldh">刘德华</div>
<div>张学友</div>
<span>香蕉</span>
<span>苹果</span>
<h1 id="bx">冰箱</h1>
<h1 id="xyj">洗衣机</h1>
<h1>h1</h1>
<a href="baidu.com">百度</a>
  • css
    	#ldh{
        width: 100px;
        height: 30px;
        background-color: green;
        color: red;
        text-align: center;
        line-height: 30px;
    }
    span{
        font-size: 25px;
        font-style: italic;
    }
    #bx{
        font-weight: normal;
        text-shadow: blue -5px 5px 3px;
    }
    #xyj{
        text-decoration: underline;
    }
    a{
        text-decoration: none;
        font-weight: bold;
        font-size: 20px;
    }

七. display 元素的显示方式

7.1. block 块级元素

块级元素的默认值, 特点: 独占一行,可以修改宽高,包括: h1-h6,p, div

7.2. inline 行内元素

行内元素的默认值, 特点: 共占一行,不能修改宽高, 包括: span,b加粗,i斜体,u下划线,s删除线,a超链接等

7.3. inline-block 行块元素

行内块元素的默认值, 特点:共占一行,并且可以修改宽高, 包括:input,img

7.4. none 隐藏元素

display隐藏元素后，不在占有原来的位置

  • display 隐藏元素后，不在占有原来的位置
    display: none; 隐藏对象
  • visibility 可见性 隐藏元素后，继续占有原来的位置
    visibility: visible; 元素可见；
visibility: hidden; 元素隐藏
  • overflow 溢出
    overflow:hidden; 隐藏
overflow:auto; 超出显示滚动条

7.5 设置display

  • 设置块级元素
     display: block;
  • 设置行内元素
     display: inline	;
  • 设置行块元素
     display: inline-block;
  • 设置隐藏元素
     display: none ;

7.6 百度一下按钮小练习

  • html
    <a href="baidu.com">百度</a>
  • css
    	 a{
        background-color: #0aa1ed;
        display: block;
        width: 132px;
        height: 40px;

        text-align: center;
        line-height: 40px;
        color: white;
        text-decoration: none;
        font-size: 20px;
        /*设置圆角,值越大越远*/
        border-radius: 3px;
    }

八. 盒子模型

盒子模型= content内容+margin外边距+padding内边距+border边框

8.1 盒子模型的作用

控制元素的显示效果

  • content内容: 控制元素的显示大小
  • margin外边距: 控制元素的显示位置
  • padding内边距: 控制元素内容的位置
  • border边框: 控制元素的边框效果

8.2 Content 盒子模型的内容

行内元素不能修改宽高,如必须要修改则需要设置为block块级元素或inline-block行内块元素

8.2.1 width 宽

  • p{
	width: 10px;
}
<p> h1 </p>

8.2.2 height 高

  • p{
	height: 10px;
}
<p> h1 </p>

8.2.3 赋值方式 像素 或 上级元素的百分比

  • p{
	width: 20%;
	height: 10px;
}
<p> h1 </p>

8.2 margin 外边距

8.2.1 Margin 单独设置

  • margin-top 上外边距
    margin-top: 100px;
  • margin-top 下外边距
    margin-bottom: 100px;
  • margin-top 右外边距
    margin-right: 150px;
  • margin-top 左外边距
    margin-left: 80px;

8.2.2 Margin 同时设置

  • 四个方向添加相同的边距
    margin: 50px;
  • 上下和左右添加外边距
    margin: 10px 20px;
  • 上右下左添加外边距
    margin: 10px 20px 30px 40px;

8.2.3 行内元素设置 Margin 上下外边距无效

上下间距无效 左右相邻彼此添加外边距是两者相加

  • html
    <span id="s1">span1</span>
<span id="s2">span2</span>
  • css
    #s1{
	margin-right: 50px;
	/*上下间距无效*/
	/*margin-top: 100px;*/
}
#s2{
	margin-left: 30px;
}

8.2.4 上外边距 粘连问题

当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题

  • 给上级元素添加overflow:hidden解决
    <div id="big">
    <div></div>
</div>
  • css
    	#big{
        width: 200px;
        height: 200px;
        background-color: green;
        /*添加此解决*/
        overflow: hidden;
    }
    #big>div{
        width: 50px;
        height: 50px;
        background-color: blue;
        margin-left: 50px;
        /*当元素的上边缘和上级元素的上边重叠时,给元素添加上外边距会出现粘连的问题,给上级元素添加overflow:hidden解决*/
        margin-top: 50px;
    }

8.2.5 自带Margin的标签

  • h1-h6 标题标签
  • p段落标签
  • 列表标签
  • body标签

8.3 border 边框

作用: 控制元素边框的效果

8.3.1 border 的赋值方式

  • border: 粗细 样式 颜色 四个方向添加边框
    border: 1px solid red; /*添加1像素的红色实线边框
  • border-left/right/top/bottom: 粗细 样式 颜色单独方向添加边框
    border-left: 1px solid red;	/*左*/
border-right: 1px solid red;/*右*/
border-top: 1px solid red;/*上*/
border-bottom: 1px solid red;/*下*/
  • 属性表
    属性作用
    border-width定义边框粗细，单位是px
    border-style边框的样式，重点记住solid、dashed、dotted
    border-color边框颜色

8.3.2 border-radius 圆角

设置圆角 值越大越圆, 超过宽高的一半时为正圆

  • border-radius
    border-radius:10px;

8.3.3 border-collapes 合并单元格

  • 设置为collapse，相邻边框会合并
    border-collapes: collapse;

8.4 padding 内边距

作用: 控制元素内容的位置

8.4.1 单独某个方向添加

  • padding-left/right/top/bottom:10px; 单独某个方向添加
    padding-left: 20px;

8.4.2 四个方向添加

  • padding-left/right/top/bottom:10px; 单独某个方向添加
    padding:10px;

8.4.3 上下和左右

  • 上下 和 左右
    padding:10px 20px;

8.4.4 上右下左顺时针添加

  • 上下 和 左右
    padding:10px 20p 30px 40px;

8.4.5 列表标签自带内边距

  • html
    <ul>
	<li>1</li>
	<li>2</li>
</ul>

8.4.6 总结

8.5 盒子模型练习

  • html
    <div id="d1">
    <div></div>
</div>
<div id="d2">哈喽</div>
  • css
    	#d1{
        background-color: red;

    }
    div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        margin-left: 25px;
        margin-top: 25px;
    }
    div>div{
        width: 50px;
        height: 50px;
        border: 1px solid red;
        background-color: blue;
        margin-top: 25px;
        margin-left: 25px;
    }
    #d2{
        border: 5px solid green;
        border-radius: 10px;
        width: 50px;
        height: 50px;
        margin-top: 0;
        margin-left: 125px;
        padding-top: 50px;
        padding-left: 50px;
    }

九. CSS的三大特性

9.1 继承性

元素可以继承上级元素文本和字体相关的样式, 部分标签自带效果不受继承影响,比如超链接字体颜色

  • html
    <div id="d1">
        <p>这是p标签</p>
        <span>这是span</span>
        <a href="#">超链接</a>
    </div>
  • css
    	body{
        /*通过继承可以把全局样式写在body中,整个页面可全部继承下来*/
		font-family: cursive;
    }
    #d1{
        color: red;
    }

9.2 层叠性

多个选择器可以选择同一个元素, 如果添加的样式不同,则全部层叠生效, 如果添加的样式相同则由优先级决定哪个生效

  • html
    <div id="d1">
        <p>这是p标签</p>
        <span>这是span</span>
        <a href="#">超链接</a>
    </div>
  • 同一个元素可以设置字体 也可以设置字体的颜色
    	body{
        /*通过继承可以把全局样式写在body中,整个页面可全部继承下来*/
		font-family: cursive;
    }
    #d1{
        color: red;
    }

9.3 优先性

指选择器的优先级, 作用范围越小优先级越高

  • !important>id选择器>类选择器>标签名选择器>继承(因为继承属于间接选中)

9.3.1 !important 优先级提权

  • html
    	<p id="id001">这是1标签</p>
    <p>这是2标签</p>
  • css
       p{
       color: green !important;
   }
   #id001{
       color: red;
   }

9.4 练习

  • html
    <div id="zuida">
    <div id="id-zuo" class="cs-zuo">
        <div id="zuo-wen-an">
            <p class="s1">灵越 燃700系列</p>
            <p>酷睿双核i5处理器|256GB SSD| 8GB内存
                英特尔HD显卡620含共享显卡内存
            </p>
            <p class="d4">$4999.00</p>
            <a href="#">查看详情</a>
        </div>
    </div>
    <div id="id-you" class="cs-you">
        <div id="you-wen-an">
            <p class="s1">颜值 框不住</p>
            <p>酷睿双核i5处理器|256GB SSD| 8GB内存
                英特尔HD显卡620含共享显卡内存
            </p>
            <p class="d4">$6888.00</p>
            <a href="#">查看详情</a>
        </div>
    </div>
</div>
  • css
        #zuida{
        width: 1000px;
        height: 376px;
        margin:  auto;
    }
    #id-zuo,#id-you{
        text-align: left;
        display: inline-block;
        background-color: #e8e8e8;
        background-repeat: no-repeat;
    }
    #id-zuo {
        width: 611px;
        height: 376px;
        background-image: url("http://doc.vrd.net.cn/tstore_v1/images/itemCat/study_computer_img1.png");
        background-position: 200px 60px;
    }
    #id-you {
        width: 375px;
        height: 376px;
        background-image: url("http://doc.vrd.net.cn/tstore_v1/images/itemCat/study_computer_img2.png");
        background-position: 80px 120px;
    }
    #zuo-wen-an,#you-wen-an{
        width: 300px;
        height: 200px;
        padding-top: 5px;
        padding-left: 20px;
    }

    p{
        margin-top: 20px;
        font-size: 5px;
        font-family: '微软雅黑 Light',serif;
    }
    a{
        margin-top: 20px;
        display: block;
        text-decoration: none;
        width: 100px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background-color: #0aa1ed;
        color: white;
    }
    .s1 {
        font-size: 40px;
        font-weight: bold;
    }
    .d4 {
        font-size: 30px;
        color: #0aa1ed;
    }

十. position 定位方式

10.1 static 静态定位

元素默认的定位方式

10.1.1 特点

  • 元素以左上为基准,行内元素从左向右依次排列, 块级元素从上往下依次排列
  • 一般情况下不能实现元素层叠效果. 通过外边距控制元素的位置

10.1.2 格式

  • html
    position:static;

10.1.3 例子

  • html
    position:static;

10.2 relative 相对定位

10.2.1 特点

  • 元素不脱离文档流(不管元素显示到什么位置都占着原来的位置),通过left/right/top/bottom控制元素的位置, 让元素相对于初始位置做偏移

10.2.2 格式

  • html
    position:relative;

10.2.3 应用场景

  • 当需要对某个元素位置进行调整,并且不影响其它元素时使用

10.3 absolute 绝对定位

10.3.1 特点

  • 元素脱离文档流(不占原来的位置) ,通过left/right/top/bottom控制元素的位置,让元素相对于窗口(默认)或某一个上级元素做偏移
  • 如果需要相对于某一个上级元素则必须把上级元素改成相对定位作为参照物.

10.3.2 格式

  • html
    position:absolute;

10.3.3 应用场景

  • 当需要实现层叠效果,让元素以页面中某一个上级元素为参照物时使用绝对定位

10.4 fixed 固定定位

10.4.1 特点

  • 元素脱离文档流, 通过left/right/top/bottom控制元素的位置,让元素相对于窗口做位置偏移.

10.4.2 格式

  • html
    position:fixed;

10.4.3 特点

  • 当需要让某个元素固定在窗口某个位置时使用

10.5 浮动定位

10.5.1 特点

  • 元素脱离文档流, 从当前所在行向左或向右浮动, 当撞到上级元素边缘或其它浮动元素时停止
  • 浮动元素一行装不下时会自动折行, 折行时有可能被卡住
    • 当某个元素的所有子元素全部浮动时, 元素自动识别的高度为0,后面的元素会顶上来并且会把文本内容挤到旁边位置显示, 通过给元素添加overflow:hidden解决此问题

10.5.2 格式

  • 左
    float:left;
  • 右
    float:right;

10.5.3 应用场景

  • 当需要将纵向排列的元素改成横向排列时使用

10.5.4 overflow 解决全部浮动父容器高度为0情况

  • html
    	<div>
        <div id="d1"></div>
        <div id="d2"></div>
        <div id="d3"></div>
    </div>
    <p>111</p>
  • css
    	body>div{
        width: 500px;
        border: 1px solid red;
        /*overflow: hidden;*/
    }
    #d1{
        width: 80px;
        height: 50px;
        background-color: red;
        float: left;
        /*float: left;*/
    }
    #d2{
        width: 80px;
        height: 50px;
        background-color: green;
        float: left;
    }
    #d3{
        width: 80px;
        height: 50px;
        background-color: blue;
        float: left;
    }

10.5.5 综合练习01

  • html
    <div id="big">
    <div id="bt">
        <img src="http://doc.vrd.net.cn/tstore_v1/images/itemCat/computer_icon1.png" alt="">
        <span >电脑,办公/1F</span>
    </div>
    <div >
        <p>电脑整机</p>
        <ul class="right-float">
            <li><a href="">笔记本</a></li>
            <li><a href="">游戏机</a></li>
            <li><a href="">台式机</a></li>
            <li><a href="">一体机</a></li>
            <li><a href="">服务器</a></li>
            <li><a href="">联想</a></li>
        </ul>
    </div>
    <div>
        <p>电脑整机</p>
        <ul class="right-float">
            <li><a href="">笔记本</a></li>
            <li><a href="">游戏机</a></li>
            <li><a href="">台式机</a></li>
            <li><a href="">一体机</a></li>
            <li><a href="">服务器</a></li>
            <li><a href="">联想</a></li>
        </ul>
    </div>
    <div>
        <p>电脑整机</p>
        <ul class="right-float">
            <li><a href="">笔记本</a></li>
            <li><a href="">游戏机</a></li>
            <li><a href="">台式机</a></li>
            <li><a href="">一体机</a></li>
            <li><a href="">服务器</a></li>
            <li><a href="">联想</a></li>
        </ul>
    </div>
</div>
  • css
    	*{
        font: 12px 'simhei',Arial,sans-serif;
        margin: 0;
        color: #666;
    }

    #big{
        width: 378px;
        height: 198px;
        background-color: #e8e8e8;
        /*border: 1px solid red;*/
    }

    #bt{
        /*border: 1px solid red;*/
    }
    #bt>img{
        margin: 5px 0 0 5px;
    }
    #bt>span{
        position: relative;
        bottom: 5px;
    }
    #bt{
        height: 30px;
        line-height: 30px;
        background-color:rgba(150,150,0,0.2);
        /*border: 1px solid red;*/
    }
    .right-float{
        margin-top: 5px;
        overflow: hidden;
        padding: 0;
    }
    .right-float>li{
        float: left;
        list-style-type: none;
        margin-left: 10px;
    }
    a{
        color: #0aa1ed;
        text-decoration: none;
    }
    div>p{
        margin: 10px 10px;
    }
    a:hover{
        color: #8a7eb8;
    }

10.5.6 综合练习02

  • html
    <div>
<div id="t_div">
    <div id="t_l_div" ></div>
    <div id="t_r_div"></div>
</div>

<div id="b_div">
    <div id="b_l_div"></div>
    <div id="b_r_div">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
</div>
  • css
    	body>div{
        width: 1000px;
        background-color: red;
        margin: 0 auto;
    }

    #t_div{
        overflow: hidden;
        margin-bottom: 10px;
    }
    #t_l_div{
        width: 611px;
        height: 376px;
        float: left;
    }
    #t_r_div{
        margin: 0;
        width: 375px;
        height: 376px;
        float: right;
    }

    #b_l_div{
        width: 394px;
        height: 233px;
       float: left;
    }
    #b_div{
        overflow: hidden;
    }
    #t_div>div,#b_l_div,#b_r_div>div{
        background-color: #e8e8e8;
    }
    #b_r_div>div{
        width: 192px;
        height: 233px;
        float: left;
        margin-left: 10px;
    }

10.5.7 综合练习03

  • html
    <div id="t_div">
    <div id="t_l_div" >
        <div>
           <p class="title_p">灵越 燃700</p>
            <p>酷睿双核 <br>
            显卡内存</p>
            <p class="price_p">4999.00</p>
                <a href="">查看详情</a>
        </div>
        <img src="http://doc.vrd.net.cn/tstore_v1/images/itemCat/study_computer_img1.png" alt="">
    </div>
    <div id="t_r_div">
        <div>
            <p class="title_p">灵越 燃700</p>
            <p>酷睿双核 <br>
                显卡内存</p>
            <p class="price_p">4999.00</p>
            <a href="">查看详情</a>
        </div>
        <img src="http://doc.vrd.net.cn/tstore_v1/images/itemCat/study_computer_img2.png" alt="">
    </div>
</div>
<div id="b_div">
    <div id="b_l_div"></div>
    <div id="b_r_div">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
</div>
  • css
            body{
        font: 12px Arial;
        color: #666;
    }
    body>div{
        width: 1000px;
        background-color: red;
        margin: 0 auto;
    }

    #t_div{
        overflow: hidden;
        margin-bottom: 10px;
    }
    #t_l_div{
        width: 611px;
        height: 376px;
        float: left;
        position: relative;
    }
    #t_r_div{
        margin: 0;
        width: 375px;
        height: 376px;
        float: right;
        position: relative;
    }

    #b_l_div{
        width: 394px;
        height: 233px;
        float: left;
    }
    #b_div{
        overflow: hidden;
    }
    #t_div>div,#b_l_div,#b_r_div>div{
        background-color: #e8e8e8;
    }
    #b_r_div>div{
        width: 192px;
        height: 233px;
        float: left;
        margin-left: 10px;
    }

    .title_p{
        font-size: 32px;
        color:#333;
        margin-bottom: 12px;
    }
    .price_p{
        font-size: 24px;
        color: #8a7eb8;
        margin-bottom: 12px;
        font-weight: bold;
    }

    #t_l_div>div{
        width: 245px;
        height: 232px;
        margin: 68px 0 0 36px;
    }
    #t_div a{
        background-color: #0aa1ed;
        width: 132px;
        height: 40px;
        display: block;
        text-align: center;
        line-height: 40px;
        text-decoration: none;
        border-radius: 3px;
        color: white;
        font-size: 20px;
    }
    #t_l_div>img{
        position: absolute;
        right: 50px;
        top: 50px;
        width: 318px;
        height: 319px;
    }
    #t_r_div>img:hover,#t_l_div>img:hover{
        /*设置动画持续时间*/
        transition-duration: 0.5s;
        transform: scale(1.1);
    }

    #t_r_div>div{
        width: 253px;
        height: 232px;
        margin: 39px 0 0 25px;
    }
    #t_r_div>img{
        position: absolute;
        right: 50px;
        bottom: 50px;
        width: 292px;
        height: 232px;
    }
    
    a{
        position: relative;
        z-index: 100;
    }

十一. overflow 溢出设置

当元素大小超出分区标签,用此可以设置显示或隐藏

11.1 hidden 隐藏

  • overflow: hidden 隐藏
        body>div{
        width: 200px;
        height: 200px;
        border: 1px solid red;
        overflow: hidden;
    }
<div>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fi3%2F415197070%2FO1CN01b0rF3z2266r4oVEiv_%21%21415197070.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1680963893&t=3593e02a099fed061022d9652a15b72b" alt="">
</div>

11.2 scroll 滚动条方式显示

  • overflow: scroll 滚动条方式显示
        body>div{
        width: 200px;
        height: 200px;
        border: 1px solid red;
        overflow: scroll ;
    }
<div>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fi3%2F415197070%2FO1CN01b0rF3z2266r4oVEiv_%21%21415197070.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1680963893&t=3593e02a099fed061022d9652a15b72b" alt="">
</div>

十二. vertical-align 设置行内元素垂直对齐方式

  • html
    <img src="" alt="">
<input type="text" value="11">

12.1 top 把元素的顶端与行中最高元素的顶端对齐

  • top
    	img{
        width: 200px;
        height: 300px;
    }
    input[type='text']{
        vertical-align: top;
    }

12.2 middle 中间对齐

  • middle 中间对齐
            img{
        width: 200px;
        height: 300px;
        vertical-align: middle;
    }
    input[type='text']{
    }

12.3 bottom 把元素的顶端与行中最低的元素的顶端对齐

  • css
        img{
        width: 200px;
        height: 300px;
        vertical-align: bottom ;
    }
    input[type='text']{
    }

12.4 baseline 默认值，元素放置在父元素的基线上

  • css
        img{
        width: 200px;
        height: 300px;
        vertical-align: baseline ;
    }
    input[type='text']{
    }

十三. z-index 设置显示层级

当元素脱离文档流出现层叠显示时,可以通过z-index设置显示层级z-index的值越大显示约靠前

  • 此样式只能添加给非静态定位的元素,静态定位添加无效

13.1 z-index 设置

  • 越高展现的越靠前
    z-index: 4;

十四. transition 过度动画

  • transition
            /*设置动画持续时间*/
        transition-duration: 0.1s;
        /*设置动画缩放比*/
        transform: scale(1.02);

14.1 综合练习

  • html
    <div id="wai_div">
    <div class="nei_div">
        <div class="t_div">
            <a href="">
                <img src="https://www.itheima.com/2020gw/images/indeximg/maptest.png"
                     alt="111" width="224px" height="125px">
            </a>
        </div>
        <div class="b_div">
            <a class="a_bt" href="">
                    【软件测试】这么入行更轻松
            </a>
            <div class="all_span">
                <span class="f_span">免费</span>
                <span class="c_span">1,232人报名</span>
            </div>
        </div>
    </div>

    <div class="nei_div">
        <div class="t_div">
            <a href="">
                <img src="https://www.itheima.com/2020gw/images/indeximg/maptest.png"
                     alt="111" width="224px" height="125px">
            </a>

        </div>
        <div class="b_div">
            <a class="a_bt" href="">
                【新媒体】这么入行更轻松
            </a>
            <div class="all_span">
                <span class="f_span">免费</span>
                <span class="c_span">1,232人报名</span>
            </div>
        </div>
    </div>

    <div class="nei_div">
        <div class="t_div">
            <a href="">
                <img src="https://www.itheima.com/2020gw/images/indeximg/mapxmt.png"
                     alt="111" width="224px" height="125px">
            </a>

        </div>
        <div class="b_div">
            <a class="a_bt" href="">
                【新媒体】玩转新媒体运营
            </a>
            <div class="all_span">
                <span class="f_span">免费</span>
                <span class="c_span">1,232人报名</span>
            </div>
        </div>
    </div>


    <div class="nei_div">
        <div class="t_div">
            <a href="">
                <img src="https://www.itheima.com/2020gw/images/indeximg/mapweb.png"
                     alt="111" width="224px" height="125px">
            </a>

        </div>
        <div class="b_div">
            <a class="a_bt" href="">
                【前端工程师】轻松入门快速进阶
            </a>
            <div class="all_span">
                <span class="f_span">免费</span>
                <span class="c_span">1,929人报名</span>
            </div>
        </div>
    </div>


    <div class="nei_div">
        <div class="t_div">
            <a href="">
                <img src="https://www.itheima.com/2020gw/images/indeximg/mapjavaee.png"
                     alt="111" width="224px" height="125px">
            </a>
        </div>
        <div class="b_div">
            <a class="a_bt" href="">
                【JAVA路线图】0基础快速入门
            </a>
            <div class="all_span">
                <span class="f_span">免费</span>
                <span class="c_span">1,929人报名</span>
            </div>
        </div>
    </div>
</div>
  • css
        body{
        font-family: Microsoft YaHei, Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;
        font-size: 14px;
        background-color: #f6f5fa;
    }


    .t_div{
        width: 224px;
        height: 125px;
    }
    .b_div{
        width: 194px;
        height: 69px;
        padding: 15px;
    }


    .all_span{
       position: relative;
    }
    .f_span{
        position: absolute;
        left: 0;
        color: #0aa1ed;
    }
    .c_span{
        position: absolute;
        right: 0;
        color: #888888;
    }
    a{
        text-decoration: none;
        display: inline-block;
    }
    a:link,a:visited{
        color: black;
    }
    .a_bt{
        margin-bottom: 12px;
        width: 194px;
        height: 40px;
    }
    .nei_div{
        float: left;
        margin: 0 10px 20px 10px;
        border-radius: 5px;
        overflow: hidden;
        background-color: #FFFFFF;
    }
    .nei_div:hover{

        /*设置动画持续时间*/
        transition-duration: 0.1s;
        transform: scale(1.02);
    }
    #wai_div{
        width: 1220px;
        height: 224px;
        margin: 0 auto;
    }
挖挖挖-9527
关注
专栏目录
Foundation教程01-Foundation的认识和安装
7086cmd的博客
03-13 1276
Foundation是一款前端框架。 Foundation是一款响应式的前端框架。 Foundation是一款响应式且移动优先的前端框架。 Foundation是一款不但响应式且移动优先，而且免费的移动框架。 Foundation是一款不但响应式且移动优先，而且免费的移动框架，用来快速开发。 本教程参考两个地方，官方文档（English）和菜鸟教程（Foundation5.5.3）。 本人的教程...
Foundation 起步介绍
Listen2You的博客
03-21 344
导读 Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。 Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。 Foundation 是一个以移动优先的流行框架。 什么是 Foundation？ Foundation 是一个免费的前端框架，用于快速开发。 Foundation 包含...
html转vue项目
qq_38880880的博客
08-19 330
总结来说，将HTML代码转换为Vue需要引入Vue框架并编写Vue组件，使用Vue的数据绑定和事件绑定语法实现页面的动态更新。当我们点击"Change Name"按钮时，changeName方法会被调用，将name属性的值改为"Vue.js"。在Vue的data选项中，我们定义了一个name属性，并将其初始值设为"Vue"。除了简单的数据绑定和事件绑定外，Vue还提供了丰富的指令和组件库，用于构建更复杂的用户界面。通过使用这些特性，我们可以将HTML代码转换为更加动态和交互的Vue应用。
响应式Web设计：纯HTML和CSS的实现技巧
vvvae1234的博客
08-18 779
互联网已经成为人们日常生活中不可或缺的一部分，随着移动设备的普及，用户访问网站的方式也发生了巨大变化。因此，响应式Web设计（Responsive Web Design, RWD）应运而生。它的目标是使Web页面能够根据不同设备屏幕的大小和分辨率自动调整布局，以提供最佳的用户体验。本文将深入探讨响应式Web设计的基本概念、实现技巧，并通过实际操作案例来展示如何使用纯HTML和CSS构建一个响应式网页。
理解现代前端开发：从HTML到React的进化之路
qq_62512874的博客
08-18 721
随着互联网的不断发展，前端开发已经经历了从静态页面到复杂单页应用（SPA）的转变。作为前端开发者，我们需要不断更新知识，掌握最新的技术栈，以应对日益复杂的开发需求。本篇文章将带你从前端的基础知识逐步深入，探索现代前端开发的关键技术，包括HTML、CSS、JavaScript，以及流行的框架如React。前端开发是一个不断演进的领域，新的工具和框架层出不穷。通过不断学习和实践，我们可以掌握最新的前端技术，构建高效、美观且功能丰富的现代Web应用。
Java学习Day33：HTML 第三章：挟魂崖
weixin_51721783的博客
08-21 869
JavaScript中，dom是一套操作文档内容的方法，可以完成查、增、删、改（先删后增）的操作。而且dom的开发效率很高，还可以用于服务器渲染、weex 开发等。本文向大家介绍JavaScript中的dom。1、什么是dom？dom，全称Document Object Model文档对象模型，是 W3C 的标准；[所有浏览器公共遵守的标准]。用于处理网页内容的方法和接口，简单的说就是一套操作文档内容的方法。2、dom组成：由HTML、CSS、事件（交互）组成。
原神4.8版本重点培养和抽到角色数据表：修改了添加倒计时.隐藏了抽到角色数据表删除按钮、备注列和选择列
最新发布
lulei5153的博客
08-22 172
当用户修改某个字段（等级、命座、天赋）时，不仅更新当前表格的数据，还会找到另一个表格中对应的角色，并更新其数据。最后，重新渲染两个表格以显示最新的数据。这样可以确保两个表格的数据始终保持一致。
响应式 Web 设计：纯 HTML 和 CSS 的实现技巧
windowshht的博客
08-22 677
响应式 Web 设计是现代网页开发的重要组成部分，能够为用户提供一致的体验。通过使用纯 HTML 和 CSS，您可以实现灵活的布局、适应不同设备的图像和样式。本文介绍的技巧和示例将帮助您在项目中有效地应用响应式设计。希望您能在实践中不断探索和优化，创造出更好的用户体验。如需深入了解响应式设计的更多内容，建议参考相关书籍和在线资源，持续学习和实践。
【HTML】从0开始构建HTML页面
weixin_51649465的博客
08-20 947
在网页中小图片或网页基本元素如图标、按钮等考虑使用GIF或PNG-8格式图像，半透明图像考虑使用真色彩PNG格式（一般指PNG32），色彩丰富的图片则考虑使用JPG格式，动态图片可以考虑使用GIF格式。
Java学习Day31：HTML 第一章：观音禅院
weixin_51721783的博客
08-20 2357
单词> ：元素标签 ：首先中至少有两个单词，那第一个肯定是元素标签，元素标签后跟的都是属性标签。
Web前端 - HTML、CSS
qq_57620101的博客
08-19 308
(Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，Live Preview: 右键show Preview 实时预览效果。所有现代的 HTML 页面都可以使用 JavaScript。Live Preview: HTML AI助手。JavaScript 是 Web 的编程语言。我们可以大大提升网页开发的工作效率！文件扩展名为 .css。
前端开发中的大屏布局方案：使用 rem 单位与动态设置 html 的 font-size
前端开发工程师
08-19 2218
在前端开发中，实现响应式布局是非常重要的，尤其是在大屏幕设备上。本文将介绍一种使用 rem 单位和动态设置 html 元素的 font-size 的方法，来实现大屏布局的解决方案。
从力扣中等+困难题+表白HTML测试 -- 文心快码（Baidu Comate）
种花家的奋斗兔的博客
08-16 1503
官网地址Step1打开文心快码（Baidu Comate）官网，点击「免费使用」/「下载安装」Step2可以根据官网步骤快速唤起VS Code；也可以直接在VS Code扩展管理搜索“文心快码”/“Baidu Comate”并安装；在插件市场搜索“文心快码”/“Baidu Comate”并安装；Xcode需要先下载文心快码(Baidu Comate)安装包后完成配置。Step3安装完成后登录账号，即刻开启智能代码之旅！
超文本文档HTML
2301_76740986的博客
08-19 304
【代码】超文本文档HTML。
html文件运行后界面反馈xxx拒绝连接
qq_62714412的博客
08-19 271
本文提供一种html文件运行后界面显示xxx拒绝连接的解决思路，主要是标签引入其它网站页面导致的情况。
html 首行缩进2字符
qq_36158551的博客
08-19 538
这样就很容易实现文本段落的缩进。
HTML静态网页成品作业(HTML+CSS)——电影加勒比海盗介绍设计制作(1个页面)
2301_78945238的博客
08-22 352
HTML静态网页成品作业(HTML+CSS)——电影加勒比海盗介绍设计制作(1个页面)
HTML静态网页成品作业(HTML+CSS)——美食企业介绍设计制作(1个页面)
2301_78945238的博客
08-18 402
HTML静态网页成品作业(HTML+CSS)——美食企业介绍设计制作(1个页面)
深入理解HTML中的script defer属性
计算机图形学
08-22 254
在Web开发中，标签用于在HTML文档中嵌入或引用JavaScript代码。为了提升页面加载性能，开发者通常会采用一些策略来优化脚本的加载和执行方式。其中，defer属性就是一个经常被用来改善页面加载性能的重要属性。本文将深入探讨defer属性的工作原理、使用场景以及它如何帮助提升Web应用的性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值