美文网首页
day22课堂总结

day22课堂总结

作者: Oot_zhl | 来源:发表于2018-12-06 22:36 被阅读0次

css其他属性

1.标准流
块级 - 一个占一行,默认的宽度是父标签的宽度,默认的高度时内容的高度,设置宽度和高度有效
行内 - 一行显示多个,默认的高度和宽度就是内容的高度和宽度,设置宽度和高度无效
行内块 - 一行显示多个,默认的宽度和高度,就是内容的宽度和高度,设置宽高有效
2.display:修改标签的类型
block
inline
inline-block
3.脱标(脱流) - 浮动、定位
一行可以显示多个,默认的大小就是内容的大小,设置宽高有效(标签之间没有空隙)
4.浮动(float)
left - 左浮动
right - 有浮动
a.文字环绕
被环绕的标签浮动,作用于文字的标签不浮动
b。清除浮动 - 清除的是因为浮动而产生的塌陷问题
高度塌陷 - 父标签不浮动,子标签浮动就会产生高度塌陷的问题
选中塌陷的标签{overflow:hidden}
5.定位
a.距离 - left、right、top、bottom
b.设置参考对象 - position
initial/static - 默认值,不定位
absolute - 绝对定位,相对于父标签定位(前提是父标签属性值不是默认值)
relative - 相对于自己定位(自己在标准流中的位置)
fixed - 相对于浏览器定位
sticky - 当浏览器滚动相对于浏览器定位,不滚动就相对自己在标准流中的位置定位(适用于最后一个标签)
6.盒子模型
一个标签是由四个部分组成;content、padding、border、margin其中margin不可见

其他样式

文字加粗
bolder(更粗的)/bold(加粗)/normal(常规)100-900
font-weight:500;
文字样式
italic/oblique - 切斜
normal - 常规的
font-style:normal;
水平对齐方式
left - 左对齐
right - 右对齐
center - 居中
text-align :center;
注意:这个属性是针对标签的内容(内容可以是文字也可以是标签)
文字行高 - 设置一行文字的高度
一个标签中只有一行内容的时候可以通过设置行高和标签的高度相同来让内容在垂直方向居中
line-height:330px;
文字装饰器
none - 去掉装饰器
underline - 添加下划线
overline - 添加上划线
line-throuht - 删除线
text-decoration:underline;
首行缩进
text-indent:2em;
字间距
letter-spacing:10px

2.列表相关属性

定义符号样式
disc(实心圆)
circle(空心圆)
none(去掉)
list-style-type:circle;
定义符号图片
list-style-image:url();
定义符号位置
outside
inside 有一定的距离
list-style-position:inside;
设置背景图
background-image:url();
背景图片是否平铺
repeat(默认的) - 当背景图片比标签小的时候,背景会重复渲染,知道将整个标签铺满为止
none - 不平铺 背景图片只显示一次
background-repeat:no-repeat;
背景图的位置
x坐标 - 数值/left/right/center
y坐标 - 数值/left/right/center
background-position-x:center;
background-position-y:center;

/===============通用=============/
{
/
取消所有自带的间距/
margin: 0;
padding: 0;
/
所有的标签的子标签都相对于自己来定位/
position: relative;
}
a{
/
取消所有a标签的下划线/
text-decoration: none;
}
/
垂直居中*/
position: absolute;
top: 50%;
margin-top: -30px;
line-height: 60px;

/背景图
background:图片地址 是否平铺 x坐标 y坐标 背景颜色
/
padding-left: 23px;
background: url(../img/q-icon.png) no-repeat 0px center rgba(0,0,0,0);

/focus - 成为焦点对应的状态/

content #login_div #div2 button:focus{

/*去掉outline*/
outline: 0;
color: rgb(215,36,50);

相关文章

  • day22课堂总结

    css其他属性 1.标准流块级 - 一个占一行,默认的宽度是父标签的宽度,默认的高度时内容的高度,设置宽度和高...

  • 2019-03-29 第四章 磁盘分区

    Day22 作者:方维超 归档:课堂笔记 时间:2019/3/29 第四章:分区知识 命令: dd 创建虚拟的文件...

  • 课堂笔记day22

    老男孩Linux运维58期课堂笔记 ...

  • day22总结

    表单标签 1.表单标签(form)表单标签一般用来做用户信息收集,单独用没有一般,一般是结合相关标签来使用(inp...

  • 2018-09-23

    Day22

  • 作业-第05周--课堂-Day22-磁盘管理 -Ⅲ

    Day22 课堂笔记 2)parted 命令案例1:需求:RAID5大小6T,已经装了系统了, 额外添加4块2T盘...

  • 318徒步中国🇨🇳第22天‖4月8号

    一渡长江 过500了 徒步318国道Day22(4月8日) 今天终于一渡长江了。印象中,长江只在书本中,课堂上,“...

  • 不断重复 养成习惯

    2020.9.25演讲高级班学习Day22 分享人:AS07李秋香 今日总结: 1.早自习+阅读 2.教资学习 3...

  • 自律给我自由—Day022

    【叶子姑娘的自律100天挑战 Day22】 2019.02.07 Day22 【早起】第27天 【阅读】《不惧前行...

  • 2017-06-26

    Day22 170626 皇帝

网友评论

      本文标题:day22课堂总结

      本文链接:https://www.haomeiwen.com/subject/ytkacqtx.html