摘要:
背景颜色 改变元素背景的颜色:background-color: 颜色; 在背景插入图片 background-image 可以同时设置背景图片和背景颜色,设置背景颜色将会图片的背景颜色 如果背景的图片小于元素,则背景图片会自动在元素中平铺 如果背景的图片大于元素,将会一个部分背景无法完全显示 如果 阅读全文
posted @ 2022-03-25 22:57
罗砂
阅读(79)
评论(0)
推荐(0)
摘要:
行高line height 行高指的是文字占有的实际高度 可以通过line-height来设置高度 行高可以直接指定一个大小(px em) 也可以直接指定一个整数 如果是一个整数的话,行高将会是字体的指定倍数 字体框 字体框就是字体存在的格子,设置font-size实际上就是在设置字体框的高度 行高 阅读全文
posted @ 2022-03-25 21:43
罗砂
阅读(169)
评论(0)
推荐(0)
摘要:
字体的样式 color 设置字体颜色 font-family:"设置字体"可以同时设置多个字体可以在网页上下载更多样式的字体 font-size:"设置字号大小" 阅读全文
posted @ 2022-03-25 20:33
罗砂
阅读(103)
评论(0)
推荐(0)
摘要:
z-index属性可以设置元素在页面上谁先优先显示 数字越大优先显示越先 z-index: 填写数字; 阅读全文
posted @ 2022-03-25 19:20
罗砂
阅读(33)
评论(0)
推荐(0)
摘要:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-25 16:41
罗砂
阅读(52)
评论(0)
推荐(0)
摘要:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-25 16:21
罗砂
阅读(35)
评论(0)
推荐(0)
摘要:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-25 16:12
罗砂
阅读(43)
评论(0)
推荐(0)
摘要:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-25 16:06
罗砂
阅读(38)
评论(0)
推荐(0)
摘要:
BFC解决高度塌陷 定义:BFC(Block Formatting Context)全称是块级格式化上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素设置了float:left,overflow:hidden或position:absolute样式,就会 阅读全文
posted @ 2022-03-25 15:14
罗砂
阅读(85)
评论(0)
推荐(0)
摘要:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-25 14:51
罗砂
阅读(26)
评论(0)
推荐(0)
摘要:
left 元素左浮动 right 元素右浮动 元素设置浮动之后会从文档流中脱离,不再占用文档流中的位置 设置浮动以后元素向父元素的左侧或者右侧移动 浮动元素不会从父元素中移除 浮动元素向左或向右移动时,不会超过它前面的其他浮动元素 <!DOCTYPE html> <html lang="en"> < 阅读全文
posted @ 2022-03-25 13:51
罗砂
阅读(31)
评论(0)
推荐(0)
摘要:
阴影 第一个值 水平偏移量 设置阴影的水平位置 正数向右移动 负数向左移动 第二个值 垂直偏移量 设置阴影的水平位置 正数向下移动 负数向上移动 第三个值 阴影的模糊程度 第四个值 阴影的颜色 效果: 圆角 可以用像素改变也可以用百分比 阅读全文
posted @ 2022-03-25 13:19
罗砂
阅读(36)
评论(0)
推荐(0)
摘要:
盒子的大小可以用width宽度和height高度 长宽度计算:长度边框+内边距+原本的长度 5px+10px+200px=215px 阅读全文
posted @ 2022-03-25 11:57
罗砂
阅读(58)
评论(0)
推荐(0)
摘要:
在做网页时写出的元素在网页中总会有边距这样看起来会很别扭,那我们该怎么把它改成没有边距呢? 方法一: 在style中给body设置 body{ maring:0; padding:0; }; 这样就解决了 方法二 去浏览器中输入网址就可以复制重置浏览器样式的内容 网址:https://meyerwe 阅读全文
posted @ 2022-03-25 11:29
罗砂
阅读(35)
评论(0)
推荐(0)
摘要:
行内元素的盒模型 行内元素不支持设置宽度和高度 行内元素可以设置padding,但是垂直方向padding不会影响页面的布局 行内元素可以设置border,垂直方向的border不会影响到页面的布局 行内元素可以设置maring,垂直方向maring不会影响布局 display 用来设置元素显示的类 阅读全文
posted @ 2022-03-25 10:59
罗砂
阅读(37)
评论(0)
推荐(0)
摘要:
垂直的外边距重叠(折叠) 相邻的垂直方向外边距会发生重叠现象 父子元素重叠 父子元素间相邻的外边距,子元素会传递给父元素(上外边距) 父子外边距的折叠会影响到页面的布局,必须要进行处理 如上图绿色的div被包在蓝色div里,但是用外边距给绿色的div设置距离蓝色的div也被影响到了 解决方法: 只要 阅读全文
posted @ 2022-03-25 10:23
罗砂
阅读(39)
评论(0)
推荐(0)
摘要:
外边距 跟内边距不一样,外边距是挪动位置 margin和padding使用方法是一样的 上右下左 一共有四个方向的外边距: margin-top 上外边距,设置一个正数,元素就会从上往下移动,如果设置为负数就会从下往上移动 margin-right margin-bottom margin-left 阅读全文
posted @ 2022-03-25 09:19
罗砂
阅读(135)
评论(0)
推荐(0)
摘要:
内边距(padding) 内容区和边框之间的区域就是内边距 一共有四个方向的内边距, padding-top paading-right padding-bottom padding-left 上图,绿色的区域就是内边距 盒子可见的大小,由内容区、内边距 和 边框共同决定的 阅读全文
posted @ 2022-03-25 08:56
罗砂
阅读(99)
评论(0)
推荐(0)