- 博客(56)
- 收藏
- 关注
RSS订阅原创 2020-09-05（文本的样式）
1.文本的样式text-decoration 设置文本修饰可选值：none 什么都没有underline 下划线line-through 删除线overline 上划线white-space 设置网页如何处理空白可选值：normal 正常nowrap 不换行pre 保留空白.box2{ white-space: nowrap; width: 200px; overflow: hidden; text-overflow: ellipsis;}...
2020-09-05 23:12:11
62
原创 2020-09-05（文本的水平和垂直对齐）
1.文本的水平和垂直对齐text-align 文本的水平对齐可选值：left 左侧对齐right 右对齐center 居中对齐justify 两端对齐vertical-align 设置元素垂直对齐的方式可选值：baseline 默认值 基线对齐top 顶部对齐bottom 底部对齐middle 居中对齐注意：有时候图片底部多出一条缝隙原因就是垂直方向是基线对齐，此时只需要设置vertical-align的属性不为baseline即可...
2020-09-05 23:00:48
399
原创 2020-09-05（字体的简写属性）
1.字体font 可以设置字体相关的所有属性语法：font：font-weight font-style 字体大小/行高 字体族行高/font-weight/font-style 可以省略不写，如果不写就是默认值normalfont-weight 字重 字体的加粗可选值：normal 默认值，不加粗bold 加粗100-900 九个级别font-style 字体的风格可选值：normal 正常的italic 斜体...
2020-09-05 22:31:53
70
原创 2020-09-05（行高）
1.行高（line-height）行高指的是文字占有的实际高度可以通过line-height来设置行高行高可以直接指定一个大小（px em），也可以直接为行高设置一个整数。如果是一个整数的话，行高将会是字体的指定的倍数行高经常还用来设置文字的行间距行间距=行高-文字大小2.字体框字体框就是字体存在的格子，设置font-size实际上就是在设置文字框的高度行高会在文字框的上下平均分配可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中...
2020-09-05 22:12:53
71
原创 2020-09-05（图标字体）
1.图标字体简介图标字体（iconfont）在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片大小本身比较大，并且非常的不灵活所以在使用图标时，可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入，这样就可以通过使用字体的形式来使用图标fontawesome使用步骤①下载https://fontawesome.com/②解压③将css和webfonts移动到项目中④将all.css引入到网页中⑤使用图标字体直接通过类名来使用图标字体clas
2020-09-05 21:51:47
101
原创 2020-09-05（字体族）
1.字体相关的样式color 用来设置字体的颜色font-size 字体的大小和font-size相关的单位：em 相当于当前元素的一个font-sizerem 相当于根元素的一个font-sizefont-family 字体族（字体的格式）可选值：serif 衬线字体sans-serif 非衬线字体monspace 等宽字体指定字体的类别，浏览器会自动使用该类别下的字体font-family 可以同时指定多个字体，多个字体间使用，隔开字体生效时优先使用第一个，第一
2020-09-05 16:18:50
105
原创 2020-09-03（元素的层级）
1.元素的层级对于开启了定位元素，可以通过z-index属性来指定元素的层级z-index需要一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示如果元素的层级一样，则会优先显示靠下的元素祖先元素的层级再高也不会盖住后代元素...
2020-09-03 22:40:12
49
原创 2020-09-03（绝对定位元素的布局）
1.绝对定位元素的布局当我们开启了绝对定位水平方向的布局等式就需要添加left和right两个值left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含块的内容区的宽度此时规则和之前的一样只是多添加了两个值：当发生过度约束：若9个值中没有auto则自动调整right值以使等式满足如果有auto，则自动调整auto的值以使等式满足可设置auto的值：mar
2020-09-03 22:20:26
86
原创 2020-09-03（定位）
1.定位（position）定位是一种更加高级的布局手段通过定位可以将元素摆放到页面的任意位置使用position属性来设置定位可选值：static 默认值，元素是静止的，没有开启定位relative 开启元素的相对定位absolute 开启元素的绝对定位fixed 开启元素的固定定位sticky 开启元素的粘滞定位2.偏移量当元素开启了定位以后，可以通过偏移量来设置元素的位置top：定位元素和定位位置上边的距离bottom：定位元素和定位位置下边的距离定位元素垂
2020-09-03 21:56:12
195
原创 2020-09-02（clear，after伪类解决高度塌陷，clearfix）
1.clear如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生影响clear：作用：清除浮动元素对当前元素所产生的影响可选值：left：清除左侧浮动元素对当前元素的影响right：清除右侧浮动元素对当前元素的影响both：清除两侧中最大影响的那侧原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响2.after伪类解决高度塌陷<!DOCTYPE html><html lan
2020-09-02 20:51:50
259
原创 2020-09-02（高度塌陷和BFC）
1.高度塌陷的问题：在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失；父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱，所以高度塌陷是浮动布局中比较常见的一个问题，需要解决。2.BFC（Block Formatting Context）块级格式化环境BFC是CSS中的一个隐含属性，可以为一个元素开启BFC，开启BFC该元素会变成一个独立的布局区域元素开启BFC后的特点：①开启BFC
2020-09-02 17:44:45
75
原创 2020-09-02（浮动）
1.浮动的简介通过浮动可以使一个元素向其父元素的左侧或右侧移动使用float属性来设置元素的浮动可选值：none 默认值，元素不浮动left 元素向左浮动right 元素向右浮动注意：元素设置浮动以后，水平布局的等式不需要强制成立元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动浮动的特点：①浮动元素会完全脱离文档流，不再占据文档流中的位置②设置浮动以后，元素会向父元素的左侧或右侧移动③浮动元素默认不会从父元素中移出④浮动
2020-09-02 15:34:54
102
原创 2020-09-01（盒子的尺寸、轮廓阴影和圆角）
1.盒子的尺寸默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）可选值：content-box：默认值，宽度和高度用来设置内容区的大小border-box：宽度和高度用来设置整个盒子可见框的大小（width和height指的是内容区和内边距和边框的总大小）2》...
2020-09-02 00:25:11
148
原创 2020-08-31（浏览器的默认样式）
1.默认样式：通常情况，浏览器都会为元素设置一些默认样式默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式*{ margin:0; padding:0;}重置样式表：专门用来对浏览器的样式进行重置reset.css 直接去除了浏览器的默认样式normalize.css 对默认样式进行了统一去除列表中的项目符号：list-style:none;...
2020-08-31 16:40:58
58
原创 2020-08-31（行内元素的盒模型）
1.行内元素的盒模型行内元素不支持设置宽度和高度行内元素可以设置padding、border、margin，但是垂直方向的padding、border、margin不会影响页面的布局2.display 用来设置元素显示的类型可选值：inline 将元素设置为行内元素block 将元素设置为快元素inline-block 将元素设置为行内块元素行内块，既可以设置宽度和高度又不会独占一行table 将元素设置为一个表格none 元素不在页面中显示，且不占据页面的位置3.visibili
2020-08-31 15:40:44
97
原创 2020-08-31（外边距的折叠）
1.垂直外边距的重叠（折叠）相邻的垂直方向外边距会发生重叠现象兄弟元素兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）特殊情况：如果相邻的外边距一正一负，则取两者的和如果相邻的外边距都是负值，则取两者中绝对值较大的兄弟元素之间的外边距的重叠，对于开发是有利的，所以不需要进行处理父子元素父子元素间相邻外边距，子元素的会传递给父元素（上外边距）父子外边距的折叠会影响到页面的布局，必须要进行处理...
2020-08-31 15:11:04
65
原创 2020-08-19（盒子模型-水平/垂直方向的布局）
一、元素的水平方向的布局：元素在其父元素中水平方向的位置由以下几个属性共同决定margin-leftborder-leftpadding-leftwidthpadding-rightborder-rightmargin-rignt一个元素在其父元素中，水平布局必须要满足以下的等式：margin-left+border-left+padding-left+width+padding-right+border-right+margin-rignt = 其父元素内容区的宽度以上等式必须满足，
2020-08-19 23:33:50
189
原创 2020-08-19（盒子模型）
盒模型、盒子模型、框模型（box model）每一个盒子都由以下几个部分组成：内容区（content）内边距（padding）边框（border）外边距（margin）1.内容区（content）元素中所有的子元素和文本内容都在内容区中排列内容区的大小由width和height两个属性来设置2.边框（border）边框的大小会影响到整个盒子的大小要设置边框，至少需要设置三个样式：边框的宽度 border-width（border-width不写时有默认值，一般是3px）bo
2020-08-19 22:49:52
108
原创 2020-08-19(文档流）
文档流网页是一个多层的结构，一层摞着一层通过css可以分别为每一层来设置样式作为用户来讲只能看到最上面一层这些层中，最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排序对于我们来说元素主要有两个状态1.在文档流中2.不在文档流中（脱离文档流）元素在文档流中有什么特点：块元素：块元素会在页面中独占一行（自上向下垂直排列）默认宽度是父元素的全部（会把父元素撑满）默认高度被内容撑开（子元素）行内元素：行内元素不会独占页面的一行，只占自身的大小行内
2020-08-19 20:32:48
112
原创 2020-08-19（继承，选择器的权重）
一、继承样式的继承，为一个元素设置的样式同时也会应用到它的后代元素上，继承是发生在祖先和后代之间的继承的设计是为了方便开发利用继承，可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式注意：并不是所有的样式都会被继承；比如：背景相关的、布局相关的等，这些样式都不会被继承。二、选择器的权重1.样式的冲突：当通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定2.
2020-08-19 16:35:37
155
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人