专栏首页Lemon黄2篇搞定CSS基础知识----第二篇

2篇搞定CSS基础知识----第二篇

CSS内边距属性:padding填充

Padding:一个数字,指的是四个方向是一样的(上右下左)

Padding的四个属性:

padding-top(上内边距),padding-right(右内边距),padding-bottom(下内边距),padding-left(左内边距)

Padding:当padding后有两个数字时即Padding:10px 20px;

指的是上下内边距为10px,左右内边距为20px

注意:两个数字之间有空格。

Padding:当padding后有三个数字时即Padding:10px 20px 30px;

指的是上边距10px,下边距的填充为30px,左右边距为20px;

Padding:当padding后有四个数字时即padding:10px 20px 30px 40px;

按着顺时针方向。(上右下左)

注意:不允许使用负值。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        div{border:1px solid red;width:300px;padding:20px;}
</style>
</head>
<body>

<body>
<div id="test">
    抓住眼前的人和事,不要再去为那遥远的虚无缥缈耗费心思,做你该做的事,不要为别人,与自己没关系的事,费劲自己的心思,不要活在过去里,无论你有任何的伤痛,回忆只会带给自己无穷无尽的苦恼,走出痛苦,活在当下,人生路很长,我要走好。
</div>
</body>

</body>
</html>

CSS外边距属性:margin

Margin:当margin后有一个数字时,指的是四个方向是一样的。

Margin的四个属性:

即margin-top(上外边距),margin-right(右外边距),margin-bottom(下外边距),margin-left(左外边距)

margin:当margin后有两个数字时,即margin:10px 20px;

指的是上下外边距为10px,左右为20px

注意:两个数字之间有空格。

margin:当margin后有三个数字时,即margin:10px 20px 30px;

指的是上外边距10px,为30px,左右外边距为20px;

margin:当四个数字

如:padding:10px 20px 30px 40px;

按着顺时针方向。(外边距,上右下左)

margin:0 10px;

margin:0;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        div{border:1px solid red;width:300px;padding:20px;margin:20px;}
</style>
</head>
<body>

<body>
<div id="test">
    抓住眼前的人和事,不要再去为那遥远的虚无缥缈耗费心思,做你该做的事,不要为别人,与自己没关系的事,费劲自己的心思,不要活在过去里,无论你有任何的伤痛,回忆只会带给自己无穷无尽的苦恼,走出痛苦,活在当下,人生路很长,我要走好。
</div>
</body>

</body>
</html>

CSS背景background

Background-color 背景色,英文单词或十六进制颜色都可以。

Background-image:url(图片路径)背景图

Background-repeat (no-repeat不重复,repeat-x,repeat-y)重复

Background-position(left,center top bottom right) 背景图定位

CSS浮动和清除

浮动的元素可以理解为该元素已经脱离文档流。“已经不存在了”

浮动只有两个方向:left,right

float:left(左浮动), float:right(右浮动);

浮动的位置:浮动到包含元素的边界。或具有浮动属性元素的边上。

浮动元素的层级高于普通元素。

凡是浮动的元素都是块元素。

如果浮动前行内元素,浮动后自动转为块元素。

备注:行内元素没有宽高,只有块元素才有宽高。

关于浮动,我们能通常用在,将块元素在一行内显示。

主要应用于排序(DIV+CSS)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .box{width:960px;height:500px;border:1px solid red;padding:10px;}
        .left{width:200px;height:200px;border:1px solid green;float:left;}
        .right{width:700px;height:200px;border:1px solid pink;float:right;}
</style>
</head>
<body>

<body>
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>

</body>
</html>

凡是设置了浮动这之后,一定要有清除浮动。

主要目的,清除上面的有浮动属性,对后面的元素造成的影响。

(上面的浮动属性,如果不清除,下面的元素会默认继承。)

清除浮动的写法:clear:left,right,both

.Clear:both,清除两边,我们通常用在版权独占一行。

清除写的位置:具有浮动属性的最后面。

通常,用一个空的<div class=”clear”></div>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .box{width:500px;height:500px;border:1px solid red;padding:10px;}
        .left{width:200px;height:200px;border:1px solid green;float:left;}
        .right{width:200px;height:200px;border:1px solid blue;float:right;}
</style>
</head>
<body>

<body>
<div class="box">
    <div class="left">我们可以耐心等,幸福可以来的慢一些,只要它是真的。人生的路,走走停停是一种闲适,边走边看是一种优雅,边走边忘是一种豁达。没有不会谢的花,没有不会退的浪,没有不会暗的光,没有不会好的伤,没有不会停下来的绝望。</div>
    <div class="right">当我们找回自己最初的愿望时,就会发现眼下的不快根本算不了什么。无论什么时候,当烦恼袭来时,当我们的心不听话硬要生气时,一定要记得告诉自己一声:我不是为了生气才活着的!命运的深层次意义,就是要学会放弃和等待,放弃一切喧嚣浮华,等待灵魂慢慢地安静。</div>
    <div>错过与过错往往就在一念之间。不要因为错过的事情而耿耿于怀,也不要因为过错而郁郁寡欢,人生本来短暂,没必要再把时间浪费在过去的事情上。凡是走过的路,都会留下痕迹。时间就像一块橡皮擦,可以轻易抹去你曾经那些有心无心错过的事情,但它却不能擦去那些因过错而烙在你心头的印痕。</div>
</div>
</body>

</body>
</html>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .box{width:500px;height:500px;border:1px solid red;padding:10px;}
        .left{width:200px;height:200px;border:1px solid green;float:left;}
        .right{width:200px;height:200px;border:1px solid blue;float:right;}
</style>
</head>
<body>

<body>
<div class="box">
    <div class="left">我们可以耐心等,幸福可以来的慢一些,只要它是真的。人生的路,走走停停是一种闲适,边走边看是一种优雅,边走边忘是一种豁达。没有不会谢的花,没有不会退的浪,没有不会暗的光,没有不会好的伤,没有不会停下来的绝望。</div>
    <div class="right">当我们找回自己最初的愿望时,就会发现眼下的不快根本算不了什么。无论什么时候,当烦恼袭来时,当我们的心不听话硬要生气时,一定要记得告诉自己一声:我不是为了生气才活着的!命运的深层次意义,就是要学会放弃和等待,放弃一切喧嚣浮华,等待灵魂慢慢地安静。</div>
    <div style="clear:both"></div>
    <div>错过与过错往往就在一念之间。不要因为错过的事情而耿耿于怀,也不要因为过错而郁郁寡欢,人生本来短暂,没必要再把时间浪费在过去的事情上。凡是走过的路,都会留下痕迹。时间就像一块橡皮擦,可以轻易抹去你曾经那些有心无心错过的事情,但它却不能擦去那些因过错而烙在你心头的印痕。</div>
</div>
</body>

</body>
</html>

CSS属性overflow

overflow 属性规定当内容溢出元素框时发生的事情。

Visible:默认值。内容不会被修剪,会呈现在元素框之外。

Hidden:内容会被修剪,并且其余内容是不可见的。

Scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

Auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        div{
            width:150px;
            height:150px;
            overflow:scroll;
        }
</style>
</head>
<body>

<body>
<div>我们可以耐心等,幸福可以来的慢一些,只要它是真的。人生的路,走走停停是一种闲适,边走边看是一种优雅,边走边忘是一种豁达。没有不会谢的花,没有不会退的浪,没有不会暗的光,没有不会好的伤,没有不会停下来的绝望。</div>
</body>

</body>
</html>

CSS引入方式:

行内引入:在标签里面直接编写行内样式

<div  style="color: #333"><div>

内嵌引入:在Html头部用<style></style>包起来

<style type="text/css">
                *{
                        padding: 0;margin: 0
                }
</style>

外部引入:引入样式表,在样式表中编写样式,引入方式如下

<link href="css/style.css" rel="stylesheet" type="text/css">

CSS选择器的优先级:

外部样式 <内部样式 <内联样式

1. 内联样式表的权值最高 1000;

2. ID 选择器的权值为 100

3. Class 类选择器的权值为 10

4. HTML 标签选择器的权值为 1

本文分享自微信公众号 - Lemon黄(lemonhunag),作者:Lemon黄

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript小游戏2

    添加CSS样式 这类就没有定义外部的样式css文件,之间在页面中head->style标签中写入:

    Lemon黄
  • IntelliJ IDEA 2019 从入门到上瘾 图文教程!

    如果说IntelliJ IDEA是一款现代化智能开发工具的话,Eclipse则称得上是石器时代的东西了。

    Lemon黄
  • Python进阶教程笔记(四)模块和包

    Python语言本身提供了非常多的模块,比如数学模块math、cmath、decimal、statistics;文件模块pathlib、stat、shutil等...

    Lemon黄
  • 【开源游戏/跑酷】我就是我

    我就是我是一款非常有趣另类的敏捷类跑酷HTML5游戏,在游戏中吃到桃心可以加快奔跑的速度,另外掉坑里,你要快速的点击屏幕,可以飞起来,只要你够牛X,你可以永远不...

    用户5997198
  • Vue项目图片剪切上传——vue-cropper的使用

    最近自己在研究vue,然后做了一个小型的后台管理系统用来练手,开发过程中,想到了剪切图片上传用户头像的需求。上网百度了一番,发现好多用的都是vue-croppe...

    用户1174387
  • CSS Box Shadow 除了做阴影效果还能做啥

    有意思的是,Box Shadow支持多个值,值之间用,分隔。也就是说,一个元素上可以有任意多个阴影。如果我们只设置阴影的水平和垂直偏移量,不设置模糊距离(默认为...

    Joel
  • 美化ThinkPHP

    首先我们来看看Thinkphp的模板, 成功界面: ? 错误页面 ? 说到美化的话,我们需要先找到这个模板在那里 ThinkPHP/Tp...

    似水的流年
  • 前端基础-CSS基础(七)

    efonfighting
  • 弹幕和回到顶部前端web

    Dream城堡
  • css单边投影与双侧投影

    早晨在前端交流群里,有个朋友问css实现单侧投影的办法,因为这个朋友前几天刚发过照片,晒他买的csssecrets,我问他你书买来还没看吗? 他说来不及翻书了...

    练小习

扫码关注云+社区

领取腾讯云代金券