目录
ovefrow属性
ovefrow属性:
处理子级内容超出当前容器的部分,只要是对父元素添加该属性值:
hidden 超出部分隐藏
scroll 滚动查看超出部分
auto 自动渲染超出的部分
overflow-x 控制X轴方向的超出部分;
overflow-y 控制y轴方向的超出部分;
white-space 属性,设置文本的格式
nowrap 强制不换行
normal 强制换行
text-overflow: 对超出的文本的内容剪裁
ellipsis 超出的内容变为省略号
clip 直接裁剪超出的文本内容
单行文本添加超出省略号:
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-style 设置字体的样式
ifalic 设置字体为斜体
italic 字体正常
font-weight 设置字体是否加粗
normal 默认
bold 加粗
bolder 相对bold加粗
他的值也可以是具体的整百数字,范围是100~900;
400->normal
700->bold
900->bolder
font-size设置所修饰字体的大小
1. 目前浏览器默认字体大小是 16px;
2. pc端浏览器的最小字体大小可以设置为12px;
font-family 设置文字的字体
可以同时设置多个字体,形如:
font-family:'A','B','C'.....;
含义是 在客户端的设备上匹配A字体,如果没有A字体,则继续匹配B字体,依次进行匹配,
直到匹配成功即可显示匹配到的字体
通用字体:
1.serif 有衬线(类似锐化)
2.sans-serif 无衬线
font 也是一个 复合型 css属性
也可以按照以下顺序书写:
font:style/weight/size/family
注意,style和weight 不是必须写入的内容,如果简写至少要需要有font-size和 font-family
background 设置标签元素的背景
background-color 设置背景色
1.英文单词
2.16进制表示颜色
3.rgb()表示颜色
background-img 设置背景图片
background-img:url(背景图地址)
background-repeat 背景图的平埔方式值:
1.repeat(默认) X,Y都平铺
2.repeat-x 沿x轴平铺
3.repeat-y 沿y轴平铺
4.no-repeat 不平铺
background-position 设置背景图定位
background-position:X轴方向的值, y轴方向的值:
1.具体的方位
2.方位名词的组合: left top right bottom center
background-attachment 设置背景图固定定位
scroll默认值,背景图片跟着页面一起滚动
fixed 根据浏览器可视区域,固定在具体的位置,它的定位参考点是浏览器的可视区域。
background 是一个复合型属性,可以写在一起,他的顺序是:background: color image repeat position attachment;
display 属性,可以用来控制标签元素的显示属性
block 把元素转化为块属性标签
inline 把元素转化为行属性标签
none 隐藏标签元素
设置内联块元素(行内块元素)
display:inline-block;
它的本质是 对内显示 块标签属性,对外显示行标签属性
两个内联块元素之间的缝隙的处理方式
原因:两个内联块元素之间键入了回车,回车也是一个字符,它的大小跟父标签的font-size有关
解决办法:
1.去掉回车键
2.设置他们父元素的大小为0
注意:字体大小是可以被传递到子元素上的