前端入门04——CSS
2021-03-07 06:26
标签：use arm 边框 ted stat Fix tle focus type 分组与嵌套 伪类选择器 伪元素选择器 选择器优先级 宽和高 字体属性 文字属性 背景属性 边框border display属性 css盒子模型 浮动float 解决浮动带来的影响 溢出属性 定位 验证浮动和定位是否脱离文档流 z-index模态框 透明度opacity 简单博客园首页搭建 JavaScript编程语言开头 静态 所有的标签默认都是静态的static，无法改变位置 相对定位(了解) 相对于标签原来的位置做移动relative 绝对定位(常用) 相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照) eg:小米网站购物车 当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位 固定定位(常用) 相对于浏览器窗口固定在某个位置 eg:右侧小广告 ps:浏览器是优先展示文本内容的 前端入门04——CSS 标签：use arm 边框 ted stat Fix tle focus type 原文地址：https://www.cnblogs.com/lucky-cat233/p/12890622.html昨日内容回顾
# 多个选择器可以并列公用一套css样式
div,p,span {}
# 不同选择器之间也可以混合使用
.c1,#d1>span {}
a:link {}
a:hover {} # 需要记忆
a:active {}
a:visited {}
input:focus {} # input框获取焦点
p:first-letter {} # 通过css加文本内容 但是无法选中
p:before {}
p:after {}
# ps:before和after多用于清除浮动带来的负面影响
"""
选择器相同 就近原则
?
行内 > id > class > 标签
精确度越高说话越硬
"""
ps:!important强制让标签采用你的样式 不推荐使用
width
height
# 块儿级标签的宽度不修改的情况下默认占浏览器一整行，块儿级标签的高度也是取决于标签内部的文本的高度 但是可以通过css设置
# 行内标签宽度和高度都是有内部文本决定的 行内标签是无法设置长宽的 无效
# 字体样式 草书 行书 ...
font-family
# 字体大小
font-size
# 字重
font-weight
# 文本颜色
1 直接写颜色英文
2 写颜色编号 #4e4e4e
3 写颜色的三基色 rgb(128,128,128) # 范围0-255
4 可以给颜色加透明度 rgba(128,128,128,0.5) # 范围0-1
ps:可以用pycharm 微信 qq等软件快速的获取你想要的颜色
# 文字对齐
text-align
center
# 文字装饰 记忆 主要就是用来给a标签去掉自带的下划线
text-decoration
none
# 首行缩进
text-indent
# 背景色
backgroud-color
# 背景图片
background:#fff url() no-repeat center center
"""
ps:当多个属性名前缀都是相同的情况下 一般都支持简写:只写前缀
"""
ps:在调样式的时候 可以借助于浏览器快速的微调，然后讲调整好的参数修改到css样式中
# 背景图片实际应用的案例
# 任何一个标签都有上下左右四个方向的边框
border-width
border-style
border-color
简写
border
?
# 画圆
border-radius:50%
# 能够让标签具有自身没有的属性和特征
display
none 隐藏 并且原来的位置也没了
inline
block
inline-block
ps:visibility:hidden只隐藏 位置还在
# 1 外边距(标签与标签之间的距离) margin
# 2 边框 border
# 3 内边距/内填充 padding
# 4 内容 content
?
"""
body标签默认自带8px的margin
?
margin:
10 上下左右
10 20 上下 左右
10 20 30 上 左右 下
10 20 30 40 上 右 下 左
padding:
10 上下左右
10 20 上下 左右
10 20 30 上 左右 下
10 20 30 40 上 右 下 左
"""
"""
只要是前期页面布局 一般都是用浮动来设计页面
能够让标签脱离正常的文档流漂浮到空中(距离用户更近)
?
浮动的元素没有块儿级和行内一说 标签多大浮动起来之后就占多大
"""今日内容
今日内容详细
解决浮动带来的影响
# 浮动带来的影响
会造成父标签塌陷的问题
?
"""
解决浮动带来的影响 推导步骤
1.自己加一个div设置高度
2.利用clear属性
#d4 {
clear: left; /*该标签的左边(地面和空中)不能有浮动的元素*/
}
3.通用的解决浮动带来的影响方法
在写html页面之前 先提前写好处理浮动带来的影响的 css代码
.clearfix:after {
content: ‘‘;
display: block;
clear:both;
}
之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix
"""溢出属性
p {
height: 100px;
width: 50px;
border: 3px solid red;
/*overflow: visible; !*默认就是可见 溢出还是展示*!*/
/*overflow: hidden; !*溢出部分直接隐藏*!*/
/*overflow: scroll; !*设置成上下滚动条的形式*!*/
/*overflow: auto;*/
}
定位
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
meta name="viewport" content="width=device-width, initial-scale=1">
style>
body {
margin: 0;
}
#d1 {
height: 100px;
width: 100px;
background-color: red;
left: 50px; /*从左往右 如果是负数 方向则相反*/
top: 50px; /*从上往下 如果是负数 方向则相反*/
/*position: static; !*默认是static无法修改位置*!*/
position: relative;
/*相对定位
标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
虽然你哪怕没有动 但是你的性质也已经改变了
*/
}
#d2 {
height: 100px;
width: 200px;
background-color: red;
position: relative; /*已经定位过了*/
}
#d3 {
height: 200px;
width: 400px;
background-color: yellowgreen;
position: absolute;
left: 200px;
top: 100px;
}
#d4 {
position: fixed; /*写了fixed之后 定位就是依据浏览器窗口*/
bottom: 10px;
right: 20px;
height: 50px;
width: 100px;
background-color: white;
border: 3px solid black;
}
style>
head>
body>
div style="height: 500px;background-color: red">div>
div style="height: 500px;background-color: greenyellow">div>
div style="height: 500px;background-color: blue">div>
div id="d4">回到顶部div>
body>
html>
验证浮动和定位是否脱离文档流(原来的位置是否还保留)
"""
浮动
相对定位
绝对定位
固定定位
"""
# 不脱离文档流
1.相对定位
# 脱离文档流
1.浮动
2.绝对定位
3.固定定位
div style="height: 100px;width: 200px;">div>
div style="height: 100px;width: 200px;position: fixed;bottom: 10px;right: 20px">div>
div style="height: 100px;width: 200px;">div>
z-index模态框
eg:百度登陆页面 其实是三层结构
1.最底部是正常内容(z=0) 最远的
2.黑色的透明区(z=99) 中间层
3.白色的注册区域(z=100) 离用户最近
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
meta name="viewport" content="width=device-width, initial-scale=1">
style>
body {
margin: 0;
}
.cover {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 99;
}
.modal {
background-color: white;
height: 200px;
width: 400px;
position: fixed;
left: 50%;
top: 50%;
z-index: 100;
margin-left: -200px;
margin-top: -100px;
}
style>
head>
body>
div>这是最底层的页面内容div>
div class="cover">div>
div class="modal">
h1>登陆页面h1>
p>username:input type="text">p>
p>password:input type="text">p>
button>点我点我~button>
div>
body>
html>
透明度opacity
# 它不单单可以修改颜色的透明度还同时修改字体的透明度
rgba只能影响颜色
而opacity可以修改颜色和字体
opacity: 0.5;
上一篇：SpringMVC的请求和响应
下一篇：53.前端07——css04