03 - Dive into CSS
Please visit zhangwenli.com/blog/2014/05/18/03-dive-into-css/ for full edition with code and images.
What will you learn in this post?
In this post, we introduce the CSS properties and most importantly, CSS position.
CSS enables us to change the style of the content. It controls how the content is rendered.
A CSS rule is made up of a selector and a group of declarations. A CSS declaration consists of a property (e.g., color
) and a value (e.g., red
).
Here is an example of typical CSS rules:
body {
color: red;
background-color: #ff0;
padding: 20px;
}
p {
margin: 10px 0;
}
Basic Properties
This post mainly focuses on CSS positioning. But before that, I'd like to introduce some frequently used CSS propertyies. To learn CSS, you don't have to know it property by property. Instead, you can totally get to know a new property once you meet with it. Although to be a good Web designer, you need to have a good command of coloring, in this post, we are just going to have a basic idea of it.
Color
There are several types to represent colors. You can use words like red
, green
, yellow
and etc. for color names. But they're quite limited. A full list is available at https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.
Usually, we can represent a color using the proportion values of red, green and blue. In CSS, a hex value #f31492
or an RGB group value rgb(24, 52, 200)
can be used to represent colors.
For hex value #f31492
, the first two digits f3
are used to present the red proportion, the next two digits 14
are for green, the last two digits 92
are for blue. Since two hex digits can represent values from 00
to ff
, each of red, green, blue components are from 0 to 255. So, #f00910
is equal to rgb(240, 9, 16)
.
If the hex value is formed like #ff7733
, it can be abbreviated to #f73
.
color
, background-color
, border-color
color
is used to set the color of text, while background-color
and border-color
set the color of background and border respectively.
<div>Hello, world!</div>
div {
width: 200px;
height: 100px;
color: rgb(255, 255, 0);
background-color: #ff6600;
border: 1px solid blue;
}
Width and Height
If you don't set the width and height of a component, it depends on the content.
<div>xxxxx x xxxx xxxxxxxxxx xxxxxxxx xxxxxxxx xxxxxx xxxxxxxx xxx xxxxx xxxxxxxxx xxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxx xxxxxxxx xxxxxxxxx xxxxxxxxx.</div>
If the width is set, the height depends on the content.
div {
width: 200px;
color: rgb(255, 255, 0);
background-color: #ff6600;
border: 1px solid blue;
}
If both width and height are set, the content may overflow.
div {
width: 200px;
height: 100px;
color: rgb(255, 255, 0);
background-color: #ff6600;
border: 1px solid blue;
}
You can set the overflowed content to be hidden using overflow: hidden;
, or display a scroll bar when overflow using overflow: auto
. If you don't want a horizontal scroll bar, you can set overflow-x: hidden; overflow-y: auto;
.
Besides px
unit, which stands for pixel, you can also use percentage to represent width and height. width: 80%;
set the width to be 80% of its parent's. For body
, the width: 100%
and height: 100%
are the width and height of the browser content, which is equal to window.innerWidth
and window.innerHeight
in JavaScript.
Margin and Padding
Margin is the outside distance from other elements, while padding is the inside distance from its child elements. Let's see the following example to have a general idea.
<div style="width: 500px; background-color: yellow;">
<div style="padding: 50px; margin: 20px; width: 200px; background-color: red;">I'm red.</div>
</div>
DIY
Use Inspect Element of Chrome or Firebug of Firefox to have a more deep understanding of this example.
Position
CSS position can sometimes be confusing and in this post, I'm going to talk about it in detail.
display
display
is one of the CSS properties that determines position, whose frequently used values are block
, inline
, inline-block
and none
.
Different elements have different default values for display
, even possibly different default values in different Web browsers. For example, display
of <div>
, <p>
is block
by default, while that of <span>
, <a>
is inline
by default. We can overwrite display
using CSS as we can always do with other CSS properties.
Next, I'm going to explain what these values mean in detail.
display: block
Element with display: block
takes the position of area of its own size and the right area of its parents. It's quite ambiguous to say so... Let's see it in an example.
<div style="width: 500px; background-color: yellow;">
<div style="width: 200px; height: 100px; background-color: red;"></div>
<div style="width: 100px; height: 50px; background-color: green;"></div>
</div>
Because the default value of display
of <div>
is block
, here although the total width of the red block and the green one is less than that of the yellow block, the green block is shown below the red one, rather than at the right side of the red one.
DIY
Use Inspect Element of Chrome or Firebug of Firefox to see the
width
,margin
of these elements and the highlighted area when hovering an element in Inspect Window.
display: inline-block
We set the display
property to be inline-block
to the previous example and now the green block is shown right to the red one, since their total width are less than their parent's width.
<div style="width: 500px; background-color: yellow;">
<div style="display: inline-block; width: 200px; height: 100px; background-color: red;"></div>
<div style="display: inline-block; width: 100px; height: 50px; background-color: green;"></div>
</div>
Please pay attention to how the green block is aligned with the red one.
If you are wondering about the gap between the elements, see StackOverflow: display: inline-block extra margin.
The gap can be easily removed by writing the red and green block in the same line with no space in-between.
display: inline
If we set display
property to be inline
to the previous example, we'll see they are not displayed at all.
<div style="width: 500px; background-color: yellow;">
<div style="display: inline; width: 200px; height: 100px; background-color: red;"></div>
<div style="display: inline; width: 100px; height: 50px; background-color: green;"></div>
</div>
In fact, we can't say they are not displayed. Let's see another example.
<div style="width: 500px; background-color: yellow;">
<div style="display: inline; width: 200px; height: 100px; background-color: red;">I'm red.</div>
<div style="display: inline; width: 100px; height: 50px; background-color: green;">I'm green.</div>
</div>
You see in this example that they are displayed when there's text in them. You can see now that when display
is set to be inline
, the element is rendered, but we can't control other properties like width
, height
, margin
, padding
and etc. any more. You may find it a little confusing, but this is very useful in some cases. For example, we can use <span style="color: red"></span>
to highlight some content without changing the text's position.
display: none
As we can guess from this code, elements with display: none
will not be displayed. Why bother writing elements that are not displayed? You may find it extremely helpful when you want to toggle some elements to display and hide.
float
You may probably be familiar with setting an image to float to left or right in Office Word. In CSS, you can also float elements to left or right of its parent. But careful! It can be somehow surprising to you.
Basically, you can set float
of the element to be left
, right
or none
if not to float.
<div style="width: 500px; background-color: yellow;">
<div style="float: left; width: 200px; height: 100px; background-color: red;"></div>
<div style="float: right; width: 100px; height: 50px; background-color: green;"></div>
</div>
Why isn't yellow displayed?
This is because when an element is set to be float: left
or float: right
, it's height will be no longer counted when computing its parent's height. So you may need to do as following. See CSS Tricks for more information.
<div style="width: 500px; background-color: yellow;">
<div style="float: left; width: 200px; height: 100px; background-color: red;"></div>
<div style="float: right; width: 100px; height: 50px; background-color: green;"></div>
<div style="clear: both"></div>
</div>
display: inline-block
vs. float: left
You may find display: inline-block
and float: left
are quite similar in some ways. So how should we choose between them?
The first thing you need to note is that display: inline-block
align at top vertically, while float: left
align at bottom.
display: inline-block
:
float: left
:
There're posts explained this topic in detail. If you are interested, you can refer to Float vs. Inline-Block and INLINE-BLOCK VS FLOAT / thinking horizontal.
Conclusion
We talked about some useful CSS properties in this post and most importantly, how to control the position of elements. By the end of this post, you should have learnt how to implement Web designs into code. But practice is extremely important in learning HTML and CSS. You need to be patient and learn bit by bit.
You are welcomed to tell me if you find this series helpful and about how you would like me to improve it to help you learn better.
Homework
The inspiring news is that you can make Web sites now!
To build a Web site, you should first design what to show and how to display it. Since we haven't talked about how to design yet, in this homework, you are given a design image and your task is to implement the design (including all description in the image).
I suggest you put your code on GitHub and share a link as comment to this post, so that we can discuss more about it.
Suggest answer will be published soon.
Please visit zhangwenli.com/blog/2014/05/18/03-dive-into-css/ for full edition with code and images.
相關文章
- CSS系列 (03):CSS三大特性CSS
- 02 - Dive into HTMLHTML
- 03-CSS初步介紹CSS
- Dive into Vue.jsVue.js
- Html/CSS03(盒子模型傳參)HTMLCSS模型
- CSS 例項系列 - 03 - Rate 愛心評分CSS
- web前端html+css常用佈局03Web前端HTMLCSS
- Dive Into Kotlin(一):初探 KotlinKotlin
- 《Docker Deep Dive》閱讀筆記(一)Docker筆記
- 《dive into python3》 筆記摘錄Python筆記
- 如何用純CSS繪製三角形--03CSS
- Dive Into Code: VSCode 原始碼閱讀(一)VSCode原始碼
- Dive into TensorFlow系列(1)-靜態圖執行原理
- 為什麼《Dive into Python》不值得推薦Python
- 5 分鐘小工具:使用 dive 分析 docker 映象Docker
- Dive Into Kotlin(二):Kotlin 型別結構設計Kotlin型別
- 03
- 隨筆:MySQL:eq_range_index_dive_limit 索引下探介面MySqlIndexMIT索引
- Dive into TensorFlow系列(2)- 解析TF核心抽象op運算元抽象
- 【Web前端HTML5&CSS3】03-字元實體與語義標籤Web前端HTMLCSSS3字元
- 03、RSTP
- 03、VLAN
- 03《構建之法》閱讀筆記03筆記
- 【正視CSS03】block與position,出門在外的朋友端午節快樂CSSBloC
- Dive Into Kotlin(四):為什麼 Kotlin 的根型別是「Any?」Kotlin型別
- Oracle——03索引Oracle索引
- 衝刺03
- 03約束
- shell practice 03
- Day03
- 11月03
- GoCN每日新聞(2018-03-03)Go
- 03.Django-ORMDjangoORM
- day03 字串字串
- MyBatis-03(CRUD)MyBatis
- AndroidBanner - ViewPager 03AndroidViewpager
- 大資料_03大資料
- statistical_c03