前端第四天

作者: knot98 | 来源:发表于2018-09-25 17:17 被阅读0次

前端第四天
前端第四天
ORID-挑刺儿 day62
JS => DOM
第十四天_复习bug定位&linux命令加强
前端第四天知识总结
前端开发学习第四天
小白迈向大神的第一步
前端学习指南第四天：数组
[前端学习]css部分学习笔记，第四天

前端第四天

一、盒模型之display

补充：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body,html {
                margin: 0;
                padding: 0;
                display: block;
            }
            p {
                /* display: block; */
                /* display: inline; */
                display: inline-block;
            }
            div {
                display: none
            }
        </style>
    </head>
    <body>
        <p>本例中的样式表把段落元素设置为内联元素。</p>
        <p>本例中的样式表把段落元素设置为内联元素。</p>
        <p>本例中的样式表把段落元素设置为内联元素。</p>
        <p>本例中的样式表把段落元素设置为内联元素。</p>
        <p>本例中的样式表把段落元素设置为内联元素。</p>
        <p>本例中的样式表把段落元素设置为内联元素。</p>
        <p>而 div 元素不会显示出来！</p>
        
        <div>div 元素的内容不会显示出来！</div>
    </body>
</html>

运行上述代码，发现设置三种 inline ，block ，inline-block 不同属性时，显示效果不同。

inline：默认。此元素会被显示为内联元素，元素前后没有换行符。
block：此元素将显示为块级元素，此元素前后会带有换行符。
inline-block：行内块元素。（使每个标签是一个个块状元素，但是没有换行符，会在一行内显示，当某个元素超出浏览器显示宽度时，那个标签内的元素才会整块换行。）

1、html 代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>display</title>
</head>
<body>
    <div></div>
    <span></span>
    <img src="./img/icon.jpg" alt="">
    <img src="./img/icon.jpg" alt="">

    <div class="sup">
        <div class="sub"></div>
    </div>
    <span class="s1">123</span>
    <span class="s2">456</span>

</body>
</html>

2、css 代码：

/*块:
1.独行显示 
2.支持宽高,宽默认适应父级,高默认由子级或内容撑开 
3.设置宽高后,一定采用设置的宽高
*/
/*内联:
1.同行显示 
2.不支持宽高
*/
/*内联块:
1.同行显示,之间有间距 
2.支持宽高,宽高由内容撑开 
3.设置宽高后,一定采用设置的宽高,但只设置其中一个,另一个会根据内容等比缩放
*/

/*嵌套规则:*/
/*块可以嵌套所有类型(p一般只允许嵌套内联)*/
/*内联一般只嵌套内联*/
/*内联块一般只作为最内层级*/
div {
    /*块*/
    display: block;
    /*自适应父级可用content的宽度*/
    /*width: auto;*/
    /*默认0*/
    /*height: 0px;*/
}
span {
    /*内联*/
    display: inline;
    /*不支持宽高*/
}
img {
    /*内联块*/
    display: inline-block;
    width: auto;
    height: auto;
}
</style>
<!-- 验证宽高设置 -->
<style>
.sup {
    /*width: 100px;*/
    /*height: 100px;*/
    background-color: orange
}
.sub {
    width: 200px;
    height: 200px;
    background-color: cyan
}
.s1, .s2 {
    width: 200px;
    height: 200px;
    background-color: brown
}
img {
    /*width: 350px;*/
    height: 350px;
}

二、盒模型之overflow

1、html 代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>voerflow</title>
</head>
<body>
    <!-- 显示区域只能由父级大小决定 -->
    <!-- display: block大环境下 -->
    <!-- <div class="sup">
        <div class="sub"></div>
    </div> -->
    <div class="sup">
        呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿
    </div>
</body>
</html>

2、css 代码：


/*子级区域大于父级*/
.sup {
    width: 100px;
    height: 100px;
    /*默认值*/
    /*border: 3px none black;*/
    /*清除边框*/
    /*border: 0;*/
    /*border: none;*/
    /*最简单的设置*/
    border: solid;
}
.sub {
    width: 200px;
    height: 200px;
    background-color: red
}
/*对父级进行overflow设置*/
.sup {
    /*以滚动的方式允许子级所有内容显示*/
    overflow: auto;
    /*overflow: scroll;*/

    /*只运行子级在父级所在区域的部分显示,超出的部分影藏*/
    /*overflow: hidden;*/
}

三、盒模型之隐藏

1、html 代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>隐藏</title>
</head>
<body>
    <div class="d1">内容</div>
    <div class="d2">内容</div>
    <div class="d3"></div>
    <div class="d4"></div>
</body>
</html>

2、css 代码：

/*盒子间会相互影响*/
div {
    width: 100px;
    height: 100px;
}
.d1 {
    background-color: red;
    /*以背景颜色透明度隐藏,不需要掌握*/
    /*盒子还在,内容或子级标签均会被显示*/
    background-color: transparent;
}
.d2 {
    background-color: orange;
    /*以盒子透明度隐藏:0~1*/
    /*盒子真正意思上透明,但盒子区域占位还在*/
    opacity: 0;
}
.d3 {
    background-color: cyan;
    /*盒子从文档中移除,盒子的区域占位消失*/
    /*当盒子重新获得显示方式,该盒子依旧从消失位置显示*/
    display: none;
}
.d4 {
    background-color: yellow;
}
/*需求:通过悬浮body让d3重新显示*/
/*
1.明确控制的对象 
2.确定对该对象的修饰 
3.找出修饰与对象的关系*/ 
/*body:hover .d3*/
.d1:hover ~ .d3 {
    display: block;
}

四、盒模型之border

1、html 代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>border</title>
</head>
<body>
    <div class="bd"></div>
</body>
</html>

2、css 代码：

/* 画梯形 */

.bd {
    width: 100px;
    height: 100px;
    background-color: transparent;
}
.bd {
    /*border: 50px solid orange;*/
    border-top: 50px solid orange;
    border-right: 50px solid cyan;
    border-bottom: 50px solid yellow;
    border-left: 50px solid blue;
    /*border-right: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid transparent;*/
}

/* 画三角形 */

.bd {
    width: 0;
    height: 0;
}
.bd {
    border-top: 50px solid orange;
    border-right: 50px solid cyan;
    border-bottom: 50px solid yellow;
    border-left: 50px solid blue;
}
/*吃球球的小球*/
/*.bd {
border-radius: 50%;
border-right: 50px solid transparent;
}*/

五、盒模型之margin

1、html 代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>margin</title>
</head>
<body>
    <div class="sup">
        <div class="sub"></div>
    </div>
</body>
</html>

2、css 代码：

/*前提:sup显示区域宽全屏,高200px, sub显示区域宽高个100px*/
/*需求1:sup左上右顶格显示*/
html, body {
    /*body默认具有margin: 8px*/
    margin: 0;
}
.sup {
    width: auto;
    height: 200px;
    background-color: red;
}
.sub {
    width: 100px;
    height: 100px;
    background-color: orange;
}
/*需求2:sub在sup的水平中央显示*/
/*.sup { 错误
text-align: center;
}*/
.sub {
    /*上下0,左右auto*/
    /*auto:左右auto,自适应(平方)剩余可布局空间*/
    margin: 0 auto;
}
/*需求3:sub在sup的垂直中央显示*/
/*垂直会遇到margin父子坑*/
/*.sub { 不行
margin: auto;
}*/
.sup {
    height: 100px;
    padding: 50px 0;
}
/*.sup {
height: 100px;
border-top: 50px solid red;
border-bottom: 50px solid red;
}*/
/*需求4:sub在sup的水平居右显示*/
.sub {
    margin-left: auto;
    /*margin-right: 0;*/
    margin-right: 10px;
}

六、盒模型之样式支持

1、html 代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>样式支持</title>
    
</head>
<body>
    <!-- 认识a标签一般怎么操作 -->
    <!-- 需求:具有页面转跳功能的图片 -->
    <!-- <a href="">
        <img src="img/icon.jpg" alt="">
    </a> -->

    <!-- 需求:图片在sup水平垂直中央显示 -->
    <!-- part1 -->
    <div class="sup">
        <img class="sub" src="img/icon.jpg" alt="">
    </div>
    <!-- part2 -->
    <div class="box"></div>
</body>
</html>

2、css 代码:

/* 认识a标签一般怎么操作 */
/* 需求:具有页面转跳功能的图片 */
a {
    color: #333;
    text-decoration: none;
    display: block;
}
</style>
/* 需求:图片在sup水平垂直中央显示 */
/* part1 */
.sup {
    width: 500px;
    /*height: 500px;*/
    background-color: red;
}
/*水平居中*/
/*display对margin的支持*/
/*block支持所有margin布局*/
/*inline与inline-block只支持margin上下布局*/
.sub {
    display: block;
    margin: 0 auto;
}
/*垂直居中*/
.sup {
    /*去除高度设置*/
    padding: 50px 0;
}

/* part2 */
.box {
    width: 500px;
    height: 500px;
    background: url('img/icon.jpg') no-repeat center orange;
}

七、层级结构

1、html 代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>层级结构</title>
</head>
<body>
    <!-- 无层次结构 -->
    <!-- <div class="d1">w3c</div>
    <div class="d2">html</div>
    <div class="d3">css</div>
    <div class="d4">js</div>
    <div class="d5">menu</div> -->
    
    <!-- 有层次结构 -->
    <div class="title">w3c</div>
    <div class="nav">
        <div class="html">html</div>
        <div class="css">css</div>
        <div class="js">js</div>
    </div>
    <div class="menu">menu</div>
</body>
</html>

2、无层级结构 css 代码:

/* 无层级结构 */
.d5 {
    width: 200px;
    height: 100px;
    background: red;
}
.d2, .d3, .d4 {
    width: 80px;
    height: 40px;
    background: orange
}
/*.d4 {
margin-left: 160px;
margin-top: -80px;
}*/
.d3 {
    margin-left: 80px;
    margin-top: -40px;
}
.d4 {
    margin-left: 160px;
    margin-top: -40px;
}
/*没有层级结构情况下:*/
/*1.盒子布局间相互影响程度很大*/
/*2.要严格遵循从上至下布局顺序进行布局*/
/*问题点:牵一发动全身*/

3、有层级结构css 代码:

/* 有层级结构 */
.menu {
    width: 200px;
    height: 100px;
    background: red;
}
.html, .css, .js {
    width: 80px;
    height: 40px;
    background: orange
}
.nav {
    width: calc(80px * 3);
    height: 40px;
}
.css {
    margin-top: -40px;
    margin-left: 80px;
}
.js {
    margin-top: -40px;
    margin-left: 160px;
}
/*menu的布局只与nav有连带关系,与实际显示内容的html,css,js不具有任何连带关系*/

前端第四天
前端第四天目录：盒模型之display 盒模型之overflow 盒模型之隐藏盒模型之border 盒模型之...
前端第四天
js语法 js 变量定义 var 名字 = 值名字:标识符命名法+小驼峰可以使用$,加入数据类型的体现t...
ORID-挑刺儿 day62
今天是调入前端部门第四天，领导要求去参加一场营销培训，这是我调入前端参与的第一次培训，带着满满的新鲜感来。我的印象...
JS => DOM
JS 操纵 DOM 的简单案例 , 仿照前端小课的第四天内容 , 添加了一些注释愿编程让这个世界更美好
第十四天_复习bug定位&linux命令加强
第三周第四天复习bug定位linux命令加强复习bug定位发现bug后定位流程看界面提示看前端日志抓包看...
前端第四天知识总结
行间距在CSS中并没有直接提供设置行间距的方式，我们只能通过设置行高来间接的设置，行高越大行间距越大使用line...
前端开发学习第四天
前端最基础的HTML 1.HTML文件的基本结构：首先打开DW建立一个html文件 ...
小白迈向大神的第一步
今天是入职的第四天，现在时间是21：23分，我还在看公司的代码，说句实话，向我这样转行从培训班出来的前端肯定不少，...
前端学习指南第四天：数组
1.创建数组var empty = [];var primes = [2,3,];var misc = [1.1 ...
[前端学习]css部分学习笔记，第四天
CSS样式表行内样式表格式：<标签 style="属性1:属性值; 属性2:属性值" > 顾名思义，行内样式表...

前端第四天

前端第四天

目录：

一、盒模型之display

1、html 代码：

2、css 代码：

二、盒模型之overflow

1、html 代码：

2、css 代码：

三、盒模型之隐藏

1、html 代码：

2、css 代码：

四、盒模型之border

1、html 代码：

2、css 代码：

五、盒模型之margin

1、html 代码：

2、css 代码：

六、盒模型之样式支持

1、html 代码：

2、css 代码:

七、层级结构

1、html 代码：

2、无层级结构 css 代码:

3、有层级结构css 代码:

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读