html-day05margin的问题&标准模式&常用属性

简介: html-day05margin的问题&标准模式&常用属性

html-day05margin的问题&标准模式&常用属性


1. margin的问题【面试题】

  1.margin的粘连问题(父随子动)
        1.使用padding替代-记得修改高度!
        2.给父元素添加透明边框。  [透明transparent]
            border:1px solid  transparent;
        3.给父元素添加overflow:hidden;
    2.margin的塌陷问题
        1.在一个元素身上设置足够的间隔。

2.标准模式和怪异模式

概念:他们都是盒子模型,只是是不同的模式而已。
设置:
    box-sizing:border-box怪异模式  | content-box 标准模式;
区别:
    元素实际占据的宽高的计算方式不一致
    标准模式:实际占据的宽度 =  width + border + padding + margin
    怪异模式:实际占据的宽度 =  width + margin
说明:通常在手机端使用怪异模式。

3.文本相关的属性

    1.文字大小
        font-size: *px | *em | *rem;
        px像素-绝对尺寸
        em是相对尺寸,是父元素文字大小的倍数。
        rem是相对尺寸,是根元素html文字大小的倍数。
    2.文字颜色
        color:颜色;
        颜色的表示方式:
            1.英文单词
            2.#16进制值;
            3.rgba(R,G,B,0~1的透明度的数字);
    3.文字类型 -宋体、雅黑
        font-family:'类型1','类型2',....;
    4.文字粗细 
        font-weight:400 | normal正常  | 700 | bold加粗
    5.文本缩进
        text-indent: *px | *em ;
        注意: 行级元素不能使用该属性。(可以padding)
    6.文字水平对齐方式
        text-align:left | center | right | justify两端对齐
        注意:行级元素不可以使用该属性。 (变成块元素)
    7.文本修饰线
        text-decoration:none 没有线 | line-through删除线 | underline下划线。
    8.文本样式 -是否倾斜
        font-style:italic | oblique 倾斜 | normal正常;
    9.行高:让一行文字垂直居中于指定高度 + 多行文字调整行间距
        line-height:*px;
    字间距   letter-spacing:*px;
    词间距   word-spacing:*px;                                                 
4.列表样式
    list-style:none;
5.背景相关的样式  
    背景颜色                    background-color:颜色;
    背景图片                    background-image:url(路径);
    背景平铺方式【重复不】       background-repeat:no-repeat不重复 | repeat-x 在x轴重复;
    背景图起始位置               background-position:x的坐标  y的坐标;
    背景复合属性                background:背景相关的设置,多个值用空格隔开;
    注意:单个和复合一起用的时候,复合在前,单个在后。





相关文章
|
6月前
|
Web App开发 缓存 搜索推荐
HTML中meta标签中属性详解并设置页面缓存策略
HTML中meta标签中属性详解并设置页面缓存策略
326 0
|
7月前
|
编解码
HTML 里 img 元素的 src 和 srcset 属性有何区别?
HTML 里 img 元素的 src 和 srcset 属性有何区别?
64 0
|
6天前
|
移动开发 前端开发 搜索推荐
【CSDN创作优化1】个人简介优化 html font属性
【CSDN创作优化1】个人简介优化 html font属性
9 0
|
6天前
|
存储 开发者 SEO
|
6天前
|
移动开发 JavaScript 前端开发
编程笔记 html5&css&js 028 HTML输入属性(2/2)
编程笔记 html5&css&js 028 HTML输入属性(2/2)
|
6天前
|
JavaScript 前端开发
编程笔记 html5&css&js 027 HTML输入属性(1/2)
编程笔记 html5&css&js 027 HTML输入属性(1/2)
|
6天前
编程笔记 html5&css&js 023 HTML表单属性
编程笔记 html5&css&js 023 HTML表单属性
|
6天前
|
存储 移动开发 前端开发
编程笔记 html5&css&js 010 HTML全局属性
编程笔记 html5&css&js 010 HTML全局属性
|
6天前
|
移动开发 前端开发 JavaScript
分享24个强大的HTML属性,建议每位前端工程师都应该掌握!
HTML属性非常多,除了一些基础属性外,还有许多有用的特别强大的属性