The difference between common confusing attributes and values in CSS (1)-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

The difference between common confusing attributes and values in CSS (1)

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 15, 2016 am 10:32 AM

CSS has many attributes, and each attribute has many values. There are thousands of combinations. The combination of different attributes can also produce different styles. CSS is really a beautiful style design language. The following is a summary of properties and values that are commonly confused in work:

1. The difference between line-height (line height) with unit and without unit:

We know that row height is inheritable. When the line-height value of the parent element does not have a unit, the child element uses its own font size and calculates the line height (the line-height of the child element = the value of line-height in the parent element * the font size of the child element). When the row height value of the parent element has a unit, the parent element first calculates the row height based on its own font size (no calculation is required when the absolute unit is px), and the child element inherits it (the row height of the child element = the row height of the parent element). .

(1). When the row height value of the parent element has units:

<span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>当哈罗德站在斑马线前按下行人按钮时——如果一直是她(莫琳，哈罗德的妻子)在做哈罗德该做的事，那么——“我是谁？”他就这样走过了邮局，连停都没有停下。原本很短的一段路由于内心的呼唤便再也无法停住脚步。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>一路上我记起了很多东西，很多我都没有意识到自己忘了的回忆，有戴维的，还有你和我的。我还记起了我的母亲，有些回忆很不容易，但大部分都很美。我很害怕，我怕有一天，或许很快，我就会把他们弄丢，这一次永远都找不回来了。”哈罗德泪流满面.<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

Copy after login

<span style="color: #800000;">body </span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #efefef</span>; }<span style="color: #800000;">
div </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 1.5em</span>;
}<span style="color: #800000;">
p </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 22px</span>; }

Copy after login

As above: When the font size of the parent element is 12px, the line height is 1.5em, and the font size of the child element is 22px, the display effect is as follows:

In the above example, the line height of p is 18px, because it inherits the line height of the parent element div, 1.5em = 12 * 1.5 = 18px; and its own font size is 22px, so it has the effect of being squeezed. In addition, the height occupied by the text has no direct relationship with font-size, but the width occupied by the text is the same as the value of font-size.

(2). When the row height value of the parent element has no unit:

<span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>你以为走路是世界上最简单的事呢？只不过是把一只脚放到另一只脚前面。但我一直很惊讶这些原本是很本能的事情实际上做起来有多困难。而吃，吃也是一样的。说话也是。还有爱。这些东西都可以很难。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我们大家都以为哈罗德徒步是因为很多年前他与奎妮有一段罗曼史。但那不是事实。哈罗德走这条路，是因为奎妮救了他，而他从来没有说过一句谢谢。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

Copy after login

<span style="color: #800000;">body </span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #efefef</span>; }<span style="color: #800000;">
div </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 1.5</span>;
}<span style="color: #800000;">
p </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 22px</span>; }

Copy after login

As above: When the font size of the parent element is 12px, the line height is 1.5, and the font size of the child element is 22px, the display effect is as follows:

In the above example, the line height of p is 33px, because it inherits the line height of 1.5 from the parent element div, and its own font size is 22px, so its own line height value is 22 * 1.5 = 33px, which will not appear. The squeezed effect in the first case.

2. The value of display (display mode) is the usage environment and difference between inline-block, table and flex:

(1). display: inline-block;

When an element is displayed in display: block;, the effect of not defining the width and defining the width as: width: 100%; or width: auto; is the same, because the block-level element will inherit the width value of the parent element. Define your own width according to the value of 100% (that is, the same width as the parent element). However, in actual projects, sometimes we do not need the width to be 100%, but we also want to set the width, height (or padding) and other attributes of the element. At this time, you need to use display: inline-block;

dom is as follows:

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="text"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>成都王府井百货<span style="color: #0000ff;"></</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>成都王府井购物中心是北京王府井百货(集团)斥资4.5亿元打造的第一个购物中心项目。购物中心集购物、餐饮、娱乐、服务、文化、教育等多项功能于一身，建筑面积约10万平方米，共计5层营业。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="查看详情"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="look-details"</span><span style="color: #0000ff;">></span>查看详情<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

Copy after login

<span style="color: #800000;">.text > div </span>{<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> 1.2rem</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;
}<span style="color: #800000;">
.text a.look-details </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> .5rem 1rem</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> .8rem</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #e04728</span>;
}

Copy after login

For the view details link above, if it is defined as display: inline-block;, you can achieve the height and width you want by setting padding without setting the width and height. The display effect is as follows:

Also, setting text-align: center; on its parent element can achieve horizontal centering.

Set the element to display: inline-block; which has the effect of both display: block; and display: inline;. You can set its height, center it, and avoid the width being 100%.

Extension:

Parent element text-align: center; child element display: inline-block; usually used for pagination effects such as news list pages.

<span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pagination"</span><span style="color: #0000ff;">></span>
    <span style="color: #008000;"><!--</span><span style="color: #008000;"> 当前页面时，给 li 添加 active 类 </span><span style="color: #008000;">--></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> aria-label</span><span style="color: #0000ff;">="Previous"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">&laquo;</span><span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="active"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>2<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>3<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>4<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>5<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> aria-label</span><span style="color: #0000ff;">="Next"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">&raquo;</span><span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>

Copy after login

<span style="color: #800000;">.pagination </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;
}<span style="color: #800000;">
.pagination:before,
.pagination:after </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> table</span>;<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> ""</span>;
}<span style="color: #800000;">
.pagination:after </span>{<span style="color: #ff0000;"> clear</span>:<span style="color: #0000ff;"> both</span>; }<span style="color: #800000;">
.pagination </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;
}<span style="color: #800000;">
.pagination > li </span>{<span style="color: #ff0000;">            
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;
}<span style="color: #800000;">
.pagination > li > a </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> -1px</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">消除两个 a 在一起时引起的双倍左外边距</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 6px 12px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #337ab7</span>;<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #ddd</span>;
}<span style="color: #800000;">
.pagination > li:first-child > a </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 0</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">第一个 a 不需要消除左外边距</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    border-top-left-radius</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
    border-bottom-left-radius</span>:<span style="color: #0000ff;"> 4px</span>;
}<span style="color: #800000;">
.pagination > li:last-child > a </span>{<span style="color: #ff0000;">
    border-top-right-radius</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
    border-bottom-right-radius</span>:<span style="color: #0000ff;"> 4px</span>;
}<span style="color: #800000;">
.pagination > li > a:hover,
.pagination > li > a:focus </span>{<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #23527c</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #eee</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #ddd</span>;
}<span style="color: #800000;">
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus </span>{<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 3</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> default</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">当前这一页，让鼠标悬浮在 a 元素上时，显示为默认光标样式，给人感觉不能点击的效果</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #337ab7</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #337ab7</span>;
}

Copy after login

(2). display: table;

In the expansion of the first case, display: table; has been used. Using display: table; this element will be displayed as a block-level table (similar to

), with line breaks before and after the table.

Commonly used when clearing floating requirements. The reason why an element needs to clear its float is because it does not have a defined height, but its child elements have floats.

As an extension of the above example, ul.pagenation does not define a height, and the child element has floats, so it needs to clear the floats. Here’s how to clear floats:

<span style="color: #800000;">.parent-box:before,
.parent-box:after </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> table</span>;<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> ""</span>; /*伪元素 before 和 after 的样式里必须添加 content 属性才会起作用*/
}<span style="color: #800000;">
.parent-box:after </span>{<span style="color: #ff0000;"> clear</span>:<span style="color: #0000ff;"> both</span>; }

Copy after login

这种清除浮动的方式， ie8 不支持。如果需要支持 ie6 - ie8，需要使用下面这种复杂一些的样式(这样的写法暂时不理解)：

<span style="color: #800000;">.clearfix::after </span>{<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;"> both</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> ” ”</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    visibility</span>:<span style="color: #0000ff;"> hidden</span>;
}<span style="color: #800000;">
.clearfix </span>{<span style="color: #ff0000;"> zoom</span>:<span style="color: #0000ff;"> 1</span>; }

Copy after login

(3). display: flex;

2009年，W3C 提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

菜鸟教程http://www.runoob.com/w3cnote/flex-grammar.html 中说得非常详细。

内容很多，但是我们平时一般会用到的就三个属性，display: flex; align-items: center; justify-content: center; 这三个属性都是用在父元素中，display: flex; 定义子元素的布局方式为弹性伸缩布局，align-items: center; 使子元素垂直居中，justify-content: center; 使子元素水平居中。

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7504

CakePHP Tutorial

1378

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What are the best practices for cross-browser compatibility in HTML5? Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What is the viewport meta tag? Why is it important for responsive design? Mar 20, 2025 pm 05:56 PM

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

What is the purpose of the <iframe> tag? What are the security considerations when using it? Mar 20, 2025 pm 06:05 PM

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.