入门8

块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别

  • 块级元素
<div>
<dd>  <dl>  <dt>
<form>
<h1 ~ h6>
<ul>  <ol>  <li>
<p>
<table>  <thead>  <tbody>  <tfoot>  <th>  <tr>
  • 行内元素
<a>
<b>  <br>
<cite>  <code>
<em>
<i>
<label>
<q>
<span>
<var>
  • 行内块状元素
<caption>
<img>  <input>
<textarea>  
<select>
<button>
  • 特性区别:
    • 行内元素和inline-block元素水平方向上默认情况下是按基线对齐
    • 行内元素和inline-block元素默认是不占据一行,块级元素默认占据一行
    • 行内元素的高度是由line-height来决定,宽度由具体的内容来决定,设置height和width无效
    • 行内元素设置上下margin、padding、border不占据空间
    • 若行内元素的上下padding,border存在颜色,则颜色会显示
    • 行内元素可以“感受”到浮动元素的存在

什么是 CSS 继承? 哪些属性能继承,哪些不能?

  • CSS继承:继承就是子标签继承了上级标签的CSS样式的属性
  • 不可继承的:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before 和 unicode-bidi。
  • 所有元素可继承:visibility 和 cursor。
  • 内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
    • 注意:<a>标签有自己的颜色和样式,不会继承自父元素
  • 终端块状元素可继承:text-indent 和 text-align。
  • 列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。
  • 表格元素可继承:border-collapse

如何让块级元素水平居中?如何让行内元素水平居中?

  • margin:0 atuto; 块级元素
  • text-align: center; 行内元素(text-align: center; 仅作用在块级元素上,所以text-align: center; 这个属性应该设置在行内元素的block级父元素上。)

用 CSS 实现一个三角形

     <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
      
    .test > div{
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-bottom-color: lightcoral;
    }
    </style>
</head>
<body>

<div class="test">
    <div></div>
</div>

单行文本溢出加 ... 如何实现?

white-space: nowrap;   不折行
text-overflow: ellipsis;   显示省略符号
overflow: hidden;   超出部分隐藏

px, em, rem 有什么区别

  • px 是绝对长度单位。em、rem 是相对长度单位
  • px
    • px 在缩放页面时无法调整那些使用它作为单位的字体、按钮等的大小
  • em
    • 如果用于font-size属性本身,则相对于父元素的font-size。若用于其它属性,则相对于元素本身的font-size
    • 当没有设置font-size时,chrome浏览器会有一个默认的 em 设置:1em = 16px
    • 缺点:容易混乱
  • rem
    • rem 是相对于根元素htmlfont-size属性的计算值,比较好计算
    • 当没有设置 font-size 时,浏览器会有一个默认的 rem 设置:1rem = 16px,这点与 em 是一致的
    • 兼容性:IE8-不支持

解释下面代码的作用?为什么要加引号?字体里\5b8b\4f53代表什么?

body{
  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}

设置字体大小12px,行高1.5,字体取值依次是 tahoma , arial , Hiragino Sans GB,宋体,sans-serif。

为什么加引号:
  当文字是中文时,不加引号会被识别成多个元素。
  若字体名中有一个或多个空格,也要添加引号

\5b8b\4f53 是Unicode码, 宋体,使用Unicode是因为网页或css编码是utf-8,直接写成中文,浏览器有可能不能识别,所以要写成Unicode编码

代码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,458评论 4 363
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,454评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,171评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,062评论 0 207
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,440评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,661评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,906评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,609评论 0 200
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,379评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,600评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,085评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,409评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,072评论 3 237
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,088评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,860评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,704评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,608评论 2 270

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,630评论 1 92
  • 1.块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别。 块级元素div,h1-6,p,hr,form...
    Feiyu_有猫病阅读 307评论 0 0
  • 1. 块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 特性区别 块级元素可以包含行内元素和块级元素...
    饥人谷_哈噜噜阅读 356评论 0 0
  • 深入理解傅里叶变换Mar 12, 2017 这原本是我在知乎上对傅立叶变换、拉普拉斯变换、Z变换的联系?为什么要进...
    价值趋势技术派阅读 5,547评论 2 2
  • 早上等公交时刷了一会朋友圈,看到车来招手师傳就停车了,上去还特意对司机说了两个谢谢。上车继续玩手机,坐了几分钟看车...
    轻柔细语的阅读 121评论 0 0