发表于： 2020-08-07 23:10:30
0 2007
今日完成:
input type = "range"填充进度条,用线性渐变
slider.style.background = "linear-gradient(90deg,#29BDE0 " + r +"%,#F0F0F0 " + r +"%)"
查看复盘流程,编辑ppt
1.任务1
需要认识到盒模型
知识点:padding(内边距),margin(外边距),border(边框),float(浮动)
行内元素,块元素,行内块元素
做法:宽度设置30%,百分比高度不能用,所以padding填充高度,添加边框圆角属性
内边距,边框都属于内容部分,会被背景颜色填充,只不过边框是显示在背景之上的
设置外边距,float让块元素当宽度不足时才会换行
当然任务也可以用vw实现
vw,px,rem, px、em、rem、%、vw、wh、vm等单位有什么区别？
bfc?
注意:浮动是作用在后面元素上的,对前一个元素没有影响,且如果取消浮动效果,要在截止的元素上清除浮动,否则会重叠
2.任务2
使用git将代码部署到github上,让其他人可以访问自己写的代码
3.任务3
当有多个小图标时,可以合成一张大图,这样只要请求一次就可以了,然后利用象限,显示具体显示那一部分
css选择器优先权
根据css选择器的
css选择规则的权值不同时，权值高的优先；
css选择规则的权值相同时，后定义的规则优先；
从而确定 定义样式规则的 优先级次序
第一等级：代表 内联样式，如 style=""，权值为 1,0,0,0；
第二等级：代表 ID选择器，如 #id="", 权值为 0,1,0,0；
第三等级：代表 calss | 伪类 | 属性 选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0；
第四等级：代表 标签 | 伪元素 选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1；
注意:
如何让这个第四等级的选择器，来变成最优先选择的呢？
css属性后面加 !important 时，无条件绝对优先
4.任务4
position属性:包含
relative(相对定位)
absolute(绝对行为)
fixed(相对定位)
relative：生成相对定位的元素，相对于其正常位置进行定位。
元素的位置通过left、right、top、button属性进行规定，
可以通过z-index进行层次分级。
元素元素仍保持其未定位前的形状，原本所占的空间仍将保留。
如果不设定位偏移量，对元素本身没有任何影响
absolute：生成绝对定位元素。使元素脱离文档流，并相对于其包含块进行定位,
一般配合相对定位使用,是绝对定位局限在某一区域,是其他部分不受影响
包含块可能是文档中的另一个元素或者是初始包含块，
元素原先在正常文档流中所占的空间会会被后面元素占据
元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框
绝对定位元素的包含块由离它最近的 'position' 属性为 'absolute'、'relative' 或者 'fixed' 的祖先元素创建。只要父级元素设置了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）。如果都没有定义，那么就相对于整个文档body定位（注意不是相对于浏览器窗口定位）
相对定位一般都是配合绝对定位元素使用
fixed：生成绝对定位元素，相对于浏览器窗口的定位。通常配合z-index一起来使用。比如说网页上悬挂的聊天图标或者广告就是用了fixed
5.弹性容器
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
容器属性
* flex-flow
* flex-direction
* flex-wrap
* justify-content
* align-items
* align-content
元素(项目属性)属性
* order
* flex-grow
* flex-shrink
* flex-basis
* flex
* align-self
vertical-align属性设置一个元素的垂直对齐方式
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
line-height设置以百分比计的行高(行间距)
6.任务6
使用:hover模拟下拉菜单
box-shadow 属性来为按钮添加阴影
box-shadow: h-shadow v-shadow blur spread color inset;
overflow
overflow属性指定如果内容溢出一个元素的框，会发生什么。
text-overflow
ext-overflow属性指定当文本溢出包含它的元素，应该发生什么。
white-space: nowrap;/*文本不会换行*/
overflow: hidden;/*溢出文本会被修剪,且修剪内容不可见*/
text-overflow: ellipsis;/*修剪文本用省略号代替*/
}//这里目的是防止文件换行冲破容器
css继承
1、字体系列属性
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
font-variant：设置小型大写字母的字体显示文本，所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-stretch：对当前的文字进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。
2、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
direction：规定文本的书写方向
text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
color：文本颜色
3、元素可见性：
visibility：控制元素显示隐藏
4、表格布局属性：
caption-side：设置表格标题的位置。
border-collapse：设置是否将表格边框折叠为单一边框。
border-spacing：设置分隔单元格边框的距离。
empty-cells：设置是否显示表格中的空单元格。
table-layout：设置显示单元、行和列的算法。
5、列表布局属性：
list-style：列表风格，包括list-style-type、list-style-image等
list-style：简写列表样式，用于把所有用于列表的属性设置于一个声明中。
list-style-type：修改用于列表项的标志类型。
list-style-image：对各标志使用一个图像。
list-style-position：可以确定标志出现在列表项内容之外还是内容内部。
6、光标属性：
cursor：光标显示为何种形态
7、生成内容属性：
quotes：设置嵌套引用的引号类型。
8、页面样式属性：
page：规定元素应该被显示的页面特定类型。
page-break-inside：设置在表格元素内部避免进行分页的分页行为。
windows：设置当元素内部发生分页时必须在页面顶部保留的最少行数。
orphans：设置当元素内部发生分页时必须在页面底部保留的最少行数。
9、声音样式属性：
speak：设置或检索声音是否给出。
speak-punctuation：设置或检索标点符号如何发音。
speak-numeral：设置或检索数字如何发音。
speak-header：设置或检索表格头与其后的一系列单元格发生多少次关系。
speech-rate：设置或检索发音速度。
volume：设置或检索音量。
voice-family：设置或检索当前声音类型。
pitch：设置或检索音高。
pitch-range：设置或检索声音的平滑程度。
stress：和pitch-range相似。设置或检索当前声音波形的最高峰值。
richness：设置或检索当前声音的音色。
azimuth：设置或检索当前声音的音场角度。
elevation：设置或检索当前声音的音源仰角。
css属性一旦继承了不能被取消，只能重新定义样式。
如果子元素不需要这个属性,只能重新定义新的样式覆盖。
返回列表
评论