• 前端学习3
  • 一、css重要属性之边框 盒子模型 浮动 定位 补充说明
    • 1.边框 border
    • 2.画圆
    • 3.display属性
    • 4.快速敲代码的方法
    • 5.盒子模型
    • 6.浮动 float(很重要)
    • 7.益处 overflow
    • 8.定位 position
    • 9.z-index
  • 二、简易博客页面搭建
    • 1.大 致步骤

前端学习3

一、css重要属性之边框 盒子模型 浮动 定位 补充说明

1.边框 border

1.详细的写法
border-left-width: 5px;
border-left-style: dotted;
border-left-color: #0000ff;
border-left/right/top/bottom  # 上下左右 跟上面英语
2.综合的写法
border: 10px solid orange;  # 三个参数顺序没有严格要求 给了就行

2.画圆

先确定好长宽，长款设置的一样是正圆，不一样就是椭圆
再跟半径属性 50%或者100%都可以，平时设置成50%即可
.c1 {
    width:500px
    hight:500px
    border:3px solid red
    border-radius:50%
}

3.display属性

display: none; 彻彻底底的隐藏标签(页面上不会显示)
visiblity: hidden 隐藏的不彻底(没有display效果好)

4.快速敲代码的方法

5.盒子模型

其实标签可以看成是盒子(举一个快递盒的例子)
所有的标签都具有盒子模型 但是主要指的div标签
1.快递包里面的实际物体 content(内容)
2.内部物体与内部盒子壁距离padding(内边距 内填充)
3.快递盒的厚度border(边框)
4.快递盒之间的距离margin(外边距)

padding: 20px;  # 上下左右
padding: 20px 30px;  # 上下 左右
padding: 10px 20px 30px;  # 上 左右 下
padding: 10px 20px 30px 40px;  # 上 下 左 右

margin与padding用法一致
针对标签嵌套 水平方向可以居中
margin: 0 auto;

6.浮动 float(很重要)

# 浮动就是用来页面布局
1.浮动的现象
	float:left\right;

2.浮动带来的影响
	浮动的元素是脱离正常文档流动 会造成实际标签塌陷

3.浮动代理的影响终极解决方案
    谁塌陷了就给谁加clearfix样式类就可以了 
    .clearfix:after {
        content: '';
        display: block;
        clear: both;
    }

7.益处 overflow

div {
    height: 150px;
    width: 150px;
    border: 5px solid greenyellow;
    border-radius: 50%;
    overflow: hidden/auto上下滚动/scroll左右滚动;
}

div {
    max-width: 100%;
}

8.定位 position

标签在默认情况下都是不可以提高定位参数来移动
定位有四种状态
1.static静态(标签默认的状态 无法定位移动)
2.relative相对定位(基于标签的位置)
3.absolute绝对定位(某个定位)
4.fixed固定定位(基于浏览器窗口固定不动)

position: relative/absolute/fixed;  # 有三种 最常用的是fixed

9.z-index

body {
    margin: 0;
}
.cover {
    backgroud-color: rgba(127,127,127,0.5);
    position: fixed;
    left: 0;
    bottom： 0；
    right: 0;
    top: 0;
    z-index: 0;
}
.modal {
    height: 200px;
    width: 400px;
    background-color: white;
    z-index: 101;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -100px;
}

二、简易博客页面搭建

1.大 致步骤

1.分析页面结构 利用布局标签div和span搭建架子
2.先编写网页骨架 HTML
3.再编写 CSS
4.最后编写JS