css 边距等常用设置

前端知识

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="sfhdjf.css">

</head>

<body>

<!--左边开始-->

<div class="left">

    <!--头像开始-->

    <div class="c1">

        <img src="ss.png" alt="显示不成功">

    </div>

    <div class="c2">洪哥的博客</div>

    <div class="c3">这条抵扣水电费</div>

    <div class="c4">

        <ul>

            <li><a href="">关于我</a></li>

            <li><a href="">关于你</a></li>

            <li><a href="">关于他</a></li>

        </ul>

    </div>

    <div class="c5">

        <ul>

            <li><a href="">js</a></li>

            <li><a href="">cs</a></li>

            <li><a href="">sss</a></li>

        </ul>

    </div>

</div>

<!--右边开始-->

<div class="right">

    <div class="c6">

        <div class="c7">

            <h1 class="c8">海燕</h1>

            <span class="c9">--</span>

        </div>

        <div class="c10">卡迪夫拉克丝打飞机</div>

        <div class="c11">困了就睡法兰克福到静安寺两地分居</div>

    </div>

    <div class="c6">

        <div class="c7">

            <h1 class="c8">海燕</h1>

            <span class="c9">--</span>

        </div>

        <div class="c10">卡迪夫拉克丝打飞机</div>

        <div class="c11">困了就睡法兰克福到静安寺两地分居</div>

    </div>

    <div class="c6">

        <div class="c7">

            <h1 class="c8">海燕</h1>

            <span class="c9">--</span>

        </div>

        <div class="c10">卡迪夫拉克丝打飞机</div>

        <div class="c11">困了就睡法兰克福到静安寺两地分居</div>

    </div>

    <div class="c6">

        <div class="c7">

            <h1 class="c8">海燕</h1>

            <span class="c9">--</span>

        </div>

        <div class="c10">卡迪夫拉克丝打飞机</div>

        <div class="c11">困了就睡法兰克福到静安寺两地分居</div>

    </div>

    <div class="c6">

        <div class="c7">

            <h1 class="c8">海燕</h1>

            <span class="c9">--</span>

        </div>

        <div class="c10">卡迪夫拉克丝打飞机</div>

        <div class="c11">困了就睡法兰克福到静安寺两地分居</div>

    </div>

    <div class="c6">

        <div class="c7">

            <h1 class="c8">海燕</h1>

            <span class="c9">--</span>

        </div>

        <div class="c10">卡迪夫拉克丝打飞机</div>

        <div class="c11">困了就睡法兰克福到静安寺两地分居</div>

    </div>

    <div class="c6">

        <div class="c7">

            <h1 class="c8">海燕</h1>

            <span class="c9">--</span>

        </div>

        <div class="c10">卡迪夫拉克丝打飞机</div>

        <div class="c11">困了就睡法兰克福到静安寺两地分居</div>

    </div>

</div>

</body>

</html>

html代码示例

/*公共样式*/

*{

    font-family: '微软雅黑';

    font-size:14px;

    margin:;

    padding:;

}

a{

    text-decoration:none;

}

/*左边栏*/

.left{

    width:%;

    background-color:rgb(,,);

    height:%;

    position:fixed;

    left:;

    top:;

}

.c1{height:128px;

    width:128px;

    border:1px solid red;

    border-radius:%;

    overflow:hidden;

    margin: auto;

}

.c1>img{

    max-width:%

}

.c2{

    color:white;

    font-size:24px;

    font-weight:bold;

    text-align:center;

    margin-top:10px;

}

.c3{

    color:white;

    text-align:center;

    border:2px solid white;

}

.c4,.c5{

    text-align:center;

    margin-top:10px;

}

.c4 a,.c5 a{

    color:white;

}

.c5 a:before{

    content:'#'

}

/*!*右边栏*!*/

.right{

    width:%;

    background-color:white;

    height:1000px;

    float:right;

}

.c6{

    background-color:grey;

    margin-left:30px;

    margin-right:%;

    margin-top:30px;

}

.c7:after{

    content:'';

    clear:both;

    display:block;

}

.c7{

    border-left:3px solid red;

}

.c8{

    float:left;

    padding:15px;

}

span{

   float:right;

}

.c10{

    margin-top:10px;

}

.c11{

    border-top:2px solid red;

    padding-top:10px;

}

css代码

. 背景属性

        . background-color

        . background-image

    . 边框属性

        . border

        . border-radius  --> 变圆

    . display属性

        . inline

        . block

        . inline-block

        . none (隐藏)

    . CSS盒子模型(从外到内)

        . margin: 边框之外的距离(多用来调整 标签和标签之间的距离)

        . border边框

        . padding:内容区和边框之间的距离(内填充/内边距)

        . condent: 内容

    . 浮动:

        div配合float 来做 页面的布局

        任何元素浮动之后都会变成块元素

        float:

            . left

            . right

            . none

    . 清除浮动(清除的是浮动带来的负面效果-->父标签塌陷(撑不起来))

        . clear

            . left

            . right

            . both

        最常和伪元素结合起来应用:

            .clearfix:after {

                content: "";

                display: block;

                clear: both

            }

    . 定位:

        . static   --> 默认的

        . relative --> 相对定位(相对于原来的位置来说)

        . absolute --> 绝对定位(相对于最近的一个被定位过的祖宗标签) (完全脱离文档流)

        . fixed    --> 固定在某个位置(返回顶部按钮)

    left   right   top   bottom

总结

    . 伪类和伪元素

        . 伪类

            . :link

            . :visited

            . :hover (重要)

            . :active

            . :focus(input标签获取光标焦点)

        . 伪元素

            . :first-letter

            . :before(重要 在内部前面添加)

            . :after(重要 在内部后面添加)

    . CSS属性

        . 字体

            . font-family

            . font-size

            . font-weight

        . 文本属性

            . text-align 对齐(重要)

            . text-decoration 装饰 (去除a标签的下划线(text-decoration: none))

            . text-indent 首行缩进

        . 背景属性

            . background-color  背景颜色

            . background-image  背景图片(九宫格涮葫芦娃)  url() no-repeat % %

        . color

            . red (直接写名字)

            . #FF0000

            . rgb(, , )  --> rgba(,,,0.5)

        . 边框属性 border

            . border-width (边框宽度)

            . border-style (边框样式)

            . border-color (边框颜色)

            简写:

                border: 1px solid red;

        . CSS盒子模型

            . content (内容)

            . padding (内填充) 调整内容和边框之间距离时使用这个属性

            . border  (边框)

            . margin  (外边距) 多用于调整调整标签之间的距离 (注意两个挨着的标签margin取最大值)

            注意: 要习惯看浏览器console窗口那个盒子模型

        . display (标签的展现形式)

            . inline

            . block   菜单里面的a标签可以设置成block

            . inline-block

            . none  (不让标签显示,不占位)

        . float(浮动)

            . 多用于实现布局效果

                . 顶部的导航条

                . 页面左右分栏 (博客页面:左边20%,右边80%)

            . float

                . 任何标签都可以浮动,浮动之后都会变成块级 a标签float之后就可以设置高和宽

            . float取值:

                . left

                . right

                . none

        . clear 清除浮动--> 清除浮动的副作用(内容飞出,父标签撑不起来)

            . 结合伪元素来实现

                .clearfix:after {

                    content: "",

                    display: "block",

                    clear: both;

                }

            . clear取值:

                . left

                . right

                . both

        . overflow

            . 标签的内容放不下(溢出)

            . 取值:

                . hidden  --> 隐藏

                . scroll  --> 出现滚动条

                . auto

                . scroll-x

                . scroll-y

            例子:

                圆形头像的例子

                    . overflow: hidden

                    . border-radius: %  (圆角)

        . 定位 position

            . static(默认)

            . relative(相对定位 --> 相当于原来的位置)

            . absolute(绝对定位 -->相当对于定位过的前辈标签)

            . fixed (固定 --> 返回顶部按钮示例)

            补充:

                脱离文档流的3种方式

                    float

                    absolute

                    fixed

        . opacity (不透明度)

            . 取值0~

            . 和rgba()的区别:

                . opacity改变元素\子元素的透明度效果

                . rgba()只改变背景颜色的透明度效果

        . z-index

            . 数值越大,越靠近你

            . 只能作用于定位过的元素

            . 自定义的模态框示例

总结

css 边距等常用设置的更多相关文章

css样式引入方式，及常用设置标签样式
一. 三种样式引入方式 1. 内联式-直接写在div标签中,不推荐用 <div style="color:red;font-size:20px;font-family:'Micro ...
CSS边距---盒子模型
CSS盒子模型盒子模型主要是有margin(外边距).border(边框).padding(内边距).content(内容)组成,这些属性我们可以把它转移到我们日常生活中的盒子上来理解,日常生活中所 ...
css内边距与外边距的区别
你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...
(转)css内边距与外边距的区别，精辟啊
css内边距与外边距的区别 (2012-05-02 13:54:54) 转载▼ 标签: 杂谈分类: css 本文也是网上看了后收藏的,忘了原地址(以后收藏文章得注意) 你真的了解margin吗?你知 ...
CSS布局和居中常用技巧
1.常用居中方法居中在布局中很常见,我们假设DOM文档结构如下,子元素要在父元素中居中: <div class="parent"> <div class=&qu ...
css的书写规范+常用
格式化: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blo ...
IntelliJ IDEA 常用设置讲解
说明 IntelliJ IDEA 有很多人性化的设置我们必须单独拿出来讲解,也因为这些人性化的设置让我们这些 IntelliJ IDEA 死忠粉更加死心塌地使用它和分享它. 常用设置 IntelliJ ...
CSS外边距margin上下元素重叠
CSS外边距margin上下元素重叠转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如 ...
IntelliJ IDEA 常用设置讲解1
IntelliJ IDEA 有很多人性化的设置我们必须单独拿出来讲解,也因为这些人性化的设置让我们这些 IntelliJ IDEA 死忠粉更加死心塌地使用它和分享它. 常用设置 IntelliJ ID ...

随机推荐

mac shortcut
在Windows系统中,如果你想跳到行首.行尾直接点击home.end键就可以了,但MacBook的相关快捷键就有些区别了,相关快捷键如下: Ctrl+A:到行首(达到Home键的效果) .fn键+左 ...
ansj
Ansj中文分词使用教程 Ansj中文分词使用教程:https://blog.csdn.net/a822631129/article/details/52331202 ansj分词史上最详细教程:ht ...
SPSS-相关分析
相关分析(二元定距变量的相关分析.二元定序变量的相关分析.偏相关分析和距离相关分析) 定义:衡量事物之间,或称变量之间线性关系相关程度的强弱并用适当的统计指标表示出来,这个过程就是相关分析变量之间的 ...
nvm 安装
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bash nvm install 8.9. ...
Python gevent
1\协程 import geventfrom gevent import monkeyimport requestsfrom bs4 import BeautifulSoupimport thread ...
pandas 读取大文件 read_table C-engine CParserError: Error tokenizing data
解决办法: pd_data = pd.read_table(comment_file,header=None,encoding='utf-8', engine='python') 官网解析: engi ...
js中基本事件的总结，onclick、onblur、onchange等
js中的基本事件总结: 特定的场景下发生的一个动作:事件:事件=函数(),事件发生会触发函数执行. 属性当以下情况发生时,出现此事件 FF N IE onabort 图像加载被中断 1 3 4 on ...
Appium1.6，安装WebDriverAgent（WDA）
前提说明:Appium1.6通过WebDriverAgent来操作iOS,所以需要在Appium下安装一份WebDriverAgent,并且将程序安装到iOS真机上 (如果是模拟器不需要这步骤) ...
jenkins搭建自动化部署平台（svn+tomcat重启）
原文链接:http://blog.csdn.net/zjs40/article/details/51818322 jenkins 自动化部署和集成代码的平台可以将Git svn 上的代码 check ...
中国剩余定理模板 51nod 1079
题目链接:传送门推荐博客:https://www.cnblogs.com/freinds/p/6388992.html (证明很好,代码有误). 1079 中国剩余定理基准时间限制:1 秒空间 ...

css 边距等常用设置

css 边距等常用设置的更多相关文章

随机推荐

热门专题