前端学习笔记css

最新推荐文章于 2024-09-11 22:31:16 发布

qq_50600069

最新推荐文章于 2024-09-11 22:31:16 发布

阅读量246

点赞数 1

文章标签：前端 css 学习

本文链接：https://blog.csdn.net/qq_50600069/article/details/125710692

版权

本文详细介绍了前端网页布局的基本原则，如标准流、浮动和定位，并讲解了CSS样式的应用，包括字体、颜色、文本对齐、背景、边框、盒模型等。此外，还探讨了Emmet语法在快速生成HTML结构中的作用，以及CSS选择器、浮动元素的处理和清除方法。同时，提到了CSS的定位模式，如相对定位、绝对定位和固定定位，以及它们的边偏移属性和z-index的使用。

摘要由CSDN通过智能技术生成

前端笔记

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
去除li的圆点：
li {list-style:none;}

Emment语法：day1

快熟生成html结构： .类名； #id名； $自增符号； {}生成内容

div*10 可以生成10个并列的div盒子
ui>li 父子集
div+span 兄弟集
.nav生成类名为nav的div盒子。默认是div
#nav 生成id名为nav的div盒子
p.nav 生成类名为nav的p标签
p#nav生成id名为nav的p标签
.demo$*5自动生成类名为demo1,demo2,demo3,demo4,demo5的兄弟集的div盒子
div*5{$}自动生成内容为1；2；3；4；5的五个div盒子

快速生成css格式！+ enter 键即可
快速格式化代码：ctrl+, ——>在用户中找：setting.json打开并添加代码 "editor.formatOnType": true, "editor.formatOnSave": true,注意 “，” 的添加。

css引入方式

内部样式表：放在html文件里面，style放在head里面。练习时常用此方式
行内样式表<p style= ""></p>
外部样式表:

步骤：单独写文件名后缀为css的文件
引入 <link rel = "stylesheet" herf = "文件名.css">
##文字

字体形式：font-family

注意：应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性
如果字体名称不止一个单词，则必须用引号引起来 font-family: "Times New Roman", Times, serif;
常用："Microsoft YAHEI"微软雅黑

大小：font-size
-单位
- px
- em（默认16px为1em）
- vm：文本大小将遵循浏览器窗口的大小，请调整浏览器窗口的大小，以查看字体大小如何缩放
粗细：font-weight

参数
- normal（400）文字正常显示
- bold（700）文字加粗显示
- 400~900(400为正常，700为加粗）不加单位

文字样式 font-style

参数
- normal - 文字正常显示
- italic 文本以斜体显示
- oblique 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

复合写法：
font-style
font-variant
font-weight
font-size/line-height
font-family

代码 font: italic small-caps bold 12px/30px Georgia, serif;

文本属性

文本颜色：color：

指定方式：
- 有效的颜色名称 eg “red”
- 十六进制值 eg “#ff0000”
- RGB 值 eg “rgb(255,0,0)”

文本对齐： text-align

参数
- center 居中对齐
- left 左对齐
- right 右对齐

文字装饰：text-decoration

参数
- none 通常用于从链接上删除下划线（*）
- underline 下划线
- overline 上划线
- line-through 删除线

文本缩进：text-indent

参数
- px
- em（默认16px为1em）

间距：

行间距line-height 指定行之间的间距可不带单位也可带单位px
字间距：word-spacing 指定文本中单词之间的间距单位px
字母间距：letter-spacing 单位px

css选择器

基础选择器

类选择器 .类名{}样式.定义，结构类调用
标签选择器 标签名{}
id选择器 #id名{} 样式#定义，结构id调用。且只能调用一次，别人不能使用。有且只有一个
通配符选择器*{}

后代选择器（重要）

元素1 元素2 元素n{}元素1是父类类名，其余元素则是后代元素

子元素选择器（亲儿子选择器）

元素1 > 元素2{} 元素2是元素1的亲儿子。

并集选择器（可选择多组选择器）

元素1 ,元素2 {}任何形式都可以用并集选择器起，并且常常竖着写，便于观看

伪类选择器

链接伪类选择器

a:link 选择所有未被访问过的链接
a:visited 选择所有被访问过的链接
a:hover 鼠标指针位于其上的链接（常用）
a:active 鼠标正在按下的链接。
- 注意要按顺序LV HA 否则效果会失效
- 常用写法 a{}然后 a:hover{}其余两个不用写

：focus伪类选择器

```
 .demo1>.demo8:focus {
```
background-color: bisque;
width: 200px;
height: 200px;
}
谁获得光标，谁就变形式；一般用于input标签中

css元素显示模式

html：

块元素：

特点：
- 自己独占一行，。默认是父级宽度
- 高度，宽度，外/内边距都可以控制
- 默认是父级宽度100%
- 是一个容器盒子，可以放行内块或块级元素
注意：文字元素不能使用块级元素

行元素：

特点：
- 一行可以放多个
- 设置高宽无效
- 默认高宽就是本身内容的高宽
- 行内元素只能容纳文本或其他行内元素
注意：一般链接不能放块元素

行元素和块元素之间的转换方式：

行元素转换为块元素：dispal:block 就具有块级元素的特点。独占一行
块元素转换为行元素：dispaly:inline 具有行内元素的特点，根据内容变换高宽
两者转换为行内块元素：display:inline-block;可以设置高宽，盒子里面的内容根据盒子的宽度自动换行，但不会撑大盒子，也不影响盒子外面的内容，不会独占一行

行内块元素：

内容：img,input,td是行内块元素。

背景

背景颜色：background-color

指定方式：
- 有效的颜色名称 eg “red”
- 十六进制值 eg “#ff0000”
- RGB 值 eg “rgb(255,0,0)”

背景图片： background-image: url("paper.gif");
背景平铺：background-repeat
- 种类
  - repeat-x：在水平方向上平铺
  - repeat-y:在垂直方向上平铺
  - no-repeat 不平铺
- 注意：页面元素即可添加背景图片也可添加背景颜色。背景图片会盖住背景颜色
背景位置：background-position

方式：
- background-position: x y; x,y既可以是center，top，bottom，right，left，也可以是像素 “21px” 。
- 注意：若只写第一个，则第二个就是默认居中对齐。若为混合形式，则第一个是x，第二个是y

背景图像（固定）：background-attachment背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）

固定背景图像： background-attachment: fixed;
背景图像应随页面的其余部分一起滚动：background-attachment: scoll;

背景透明度：指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明

方式：
- 使用 opacity 属性 opacity: 0.3;

 - 使用 RGBA 的透明度 `background: rgba(0, 128, 0, 0.3) `

复合写法:顺序：background-color
background-image
background-repeat
background-attachment
background-position

盒子模型：day2

行内块元素：dispaly：inline-block；

边框 border

border- weight:边框的粗细，单位是px
border- style solid: 实线边框。 dashed虚线边框 dotted点线边框其余的没有什么用，兼容性不太好
border-color :边框的颜色
边框的复合型写法：border ：1px solid red 没有顺序有border-top ,bottom,left,right 的选择。
border- collapse ：collapse 合并相邻的边框

内边距：内容到边框的距离padding

也有top ,bottom,left,right ,也有复合性写法。

bpadding： x y z p ;
1个值表示上下左右；2个值上下，左右；3个上，左右，下；4个值上右下左.（是顺时针的顺序）都需要记住.
如果写了width和height那么padding就会撑大盒子，需要在width和height上减去相应撑大的距离.

盒子的外面距：控制盒子与盒子之间的距离margin

也有top ,bottom,left,right ,也有复合性写法。
让块级元素实现水平居中margin：0 auto；或者是margin auto；或者margin-left：auto；margin-rightauto；
让行内元素或者行内块元素居中对齐给父元素添加tsxt-align：center
嵌套块元素垂直外边距的塌陷问题：

解决方法：

为父元素定义上边框，
为父元素定义内边距
为父元素添加overflow：hidden

5.清楚内外边距：（一般是第一行就写这段代码）

 * {
		padding: 0;/*清楚内边距*/

		margin: 0;/*清楚外边距*/

}

注意：行内元素为了照顾兼容性，尽量只设置左右外边距不要设置上下外边距，但是转换为会计和行内块元素就可以了。

圆角边框

border—radius:length;length越大，圆角边框的弧度越大。如果想要圆形边框，则将边框设为正方形再将length设为长度的一半。
length可以设多个值1~4。

四个值 border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）：
三个值 border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）：
两个值 border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）：
一个值 border-radius: 15px;（该值用于所有四个角，圆角都是一样的）：

圆角的代码border-radius:50%

盒子阴影

box-shadow:h-shadow v-shadow blur apread color inset

h-shadow :水平阴影位置
v-shadow：垂直阴影位置
blur：模糊程度
apread：阴影的大小
color：阴影的颜色
inset：内部阴影（默认为外部阴影）

盒子阴影不占用空间且不能写outset

文字阴影（了解即可）

1. text-shadow:h-shadow v-shadow blur color

h-shadow :水平阴影位置
v-shadow：垂直阴影位置
blur：模糊程度
color：阴影的颜色

浮动

依靠边缘浮动或者是依靠浮动的边缘浮动。所有浮动都是连接在一起的浮动。
float 属性可以设置以下值之一：

left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值

浮动的特性

脱标。浮动的盒子不再保留原先的位置。类似排队，若自己浮动则想象飞到空中那其他人会走到自己的位置
浮动的元素是互相贴在一起的不会有空隙，若父级宽度装不下这些浮动的盒子，则多出去的盒子会另起一行对齐（按上沿对齐）
浮动的盒子就会成为行内块元素。

注意点

父标儿浮：浮动元素经常和标准流父级搭配使用，父标儿浮（父盒子是标准流，子盒子是浮动流）
一浮全浮：一个元素浮动了，理论其余兄弟元素也要浮动。
浮动只能影响后面的标准流盒子，不会影响前面的元素

常见的网页布局

只要是通栏的盒子（和浏览器一样宽的盒子），则不需要设置宽度。

清除浮动

本质：清除浮动的本质就是清除浮动的影响
清楚浮动（闭合浮动）的方法：只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子
措施：
1. 额外标签法：就是在最后一个浮动的子元素后面添加一个额外的标签。（了解即可）
  - 优点：通俗易懂
  - 缺点：结构较差
  - 注意：添加的必须是块级元素不能是行内元素
2. 父级添加overflow属性：hidden scroll
  - 优点：代码简单
  - 缺点：不能显示溢出的内容
3. 父级添加： :after伪元素

 .clearfix:after{ 

content:"";

display:block;

height:0;

clear:both;

visibility:hidden;



. clearfix { /*为了照顾低版本的浏览器*/

*zoom: 1;

}

优点：没有增加标签
缺点：需照顾低版本浏览器
代表网站：百度，淘宝，网易等都是用的此方法

双伪元素清除浮动

   .clearfix:before, .clearfix:after{ 

content: "";

dispaly: table;

}

 .clearfix:after{

clear:both;}

 . clearfix { /*为了照顾低版本的浏览器*/

*zoom: 1;
 
}

优点：代码简单
缺点：需照顾低版本浏览器
代表网站：腾讯等都是用的此方法

css属性书写顺序(先写布局，再有样式）

确认版型有多宽，模块的板块是什么。布局比样式最重要。

布局定位属性：dispaly/position/float/clear/visibility/overflow（建议dispaly第一个写，关系到模式）
自身属性：width/height/margin/padding/border/backgroumd
文本属性：color/font/text-decoration/text-algin/vertical-align/white-space/break-word
其他属性(css3)：content/cursor/border-radius/box-shadow/text-shadow…

定位

为什么要定位

浮动可以让多个会计盒子没有缝隙的排列显示，经常用于横向排列盒子
定位则是可以让盒子自由的在某个就蛾子移动位置或者固定屏幕中某个位置，并压住其他盒子。

###定位的组成
定位=定位模式+边偏移

一：定位模式：position属性

有四个不同的位置值：

static：静态定位且静态定位的元素不受 top、bottom、left 和 right 属性的影响。（很少使用）
relative：相对定位（很重要）元素移动的时候，是相对于它原来的位置来说的。
可以通过margin： 100px auto来实现居中
- 特点：
  - 按自己原来的位置进行移动
  - 原来的位置继续占有，并没有脱标
- 典型应用：给绝对定位当父亲（子绝父相）
absolute：绝对定位（很重要）元素在移动位置的时候，是相对于祖先元素来说的
- 特点：
  - 如果没有祖先元素或者祖先元素没有点定位，则以浏览器为准定位（document文档）
  - 如果祖先有定位（相对，绝对，固定定位），则以最近一级的有定位祖先元素为参考点移动位置（就近原则）
  - 不占原先的位置
  - 子绝父相：父级需要占用位置，因此是相对定位，自盒子不需要占有位置，则是绝对定位
- 绝对定位的盒子垂直居中
  - 第一步：top：50%;
  - 第二步：margin-top:-width/2 px.即父盒子高度的一半
fixed：固定定位 元素固定在浏览器可视区的位置。
特点：
- 以浏览器的可视窗口为参照点（跟父元素没有任何关系，不随滚动条滚动）
- 不占有原先的位置
- 主要使用场景：可以在浏览器页面滚动是元素的位置不会改变
- 使用小技巧（固定在版心右侧位置）
  - 让固定方位的盒子：left:50%(可视窗口的一半位置）
  - 让固定定位的盒子margin-left：版心宽度的一半
sticky：粘性定位（滑倒某一位置是就不变了）
- 特点：
  - 以浏览器的可视窗口为参照点(固定定位的特点）
  - 占有原先的位置（相对定位的特点）
  - 必须添加top ,bottom,left,right其中一个才有效
  - 主要使用场景：可以在浏览器页面滚动是元素的位置不会改变
- 使用小技巧（固定在版心右侧位置）