Web前端之CSS_day3-4

时间:2022-09-28 09:08:49

1、行高

1.1 初始行高

行高=文字大小+上间距+下间距

默认文字大小:16px

默认文字行高:18px

注意:行高=盒子的高度,可以让文字垂直居中显示

1.2 行高单位

a. px 行高设置多少就是多少

b. em 行高=文字大小*设置的行高值

c. % 行高=文字大小*设置的行高值

d. 不带单位 行高=文字大小*设置的行高值

1.3 给父盒子设置行高

a. px 子盒子中的行高=父盒子的行高

b. em 子盒子的行高=父盒子文字大小*设定的行高值

c. %  子盒子的行高=父盒子文字大小*设定的行高值

d. 不带单位  子盒子的行高=子盒子文字大小*设定的行高值

2、盒子模型

2.1 盒子模型--->网页布局

border     边框

padding    内边距

margin     外边距

2.2 border(边框)

border:border-width|border-style|border-color

border-width      边框宽度

border-style      边框线型

dotted     点线

dashed     虚线

solid      实线

border-color      边框颜色

border:0 none     去掉边框线

border属性联写:

Web前端之CSS_day3-4

border的其他写法:

Web前端之CSS_day3-4

小方法:

outline-style:none       去掉表单控件轮廓线

list-style:none          去掉li前面的默认小圆点

2.3 padding(内边距)

Padding 设置内容距离盒子内边距离

Web前端之CSS_day3-4

padding:10px 只写一个数值,表示上下左右内边距都为10px

padding:10px 20px  写两个值,表示上下10px,左右20px

padding:10px 20px 30px    写三个值,表示上10px,左右20px,下30px

padding:10px 20px 30px 40px 表示上10px 右20px 下30px左40px

注意:

a. border和padding都可以影响盒子的大小,盒子真正的大小(宽度)=设置的盒子宽度+左右border+左右padding

b.继承的盒子:设置padding值不影响子盒子大小

2.4 margin(外边距)

margin不会影响盒子的大小

外边距合并问题

a. 垂直合并()

margin值以最大的值为准

Web前端之CSS_day3-4

b. 包含合并

解决方法:

1:给父盒子设置边框

2:overflow:hidden

Web前端之CSS_day3-4

  2.5 表格合并

border-collapse:collapse

Web前端之CSS_day3-4

3、浮动

3.1 标准流

块级元素默认单独在一行上显示,标准流的显示方式

行内元素默认也在一行上显示,这也是标准流的显示方式

3.2 浮动的使用

float:left|right

Web前端之CSS_day3-4

3.3 浮动的特点

a. 设置了浮动的元素,不占用原来的位置

Web前端之CSS_day3-4

b. 可以让块级元素在一行上显示(脱离标准流)(浮动找浮动,不浮动找不浮动)

Web前端之CSS_day3-4

c. 浮动以元素顶部对齐

Web前端之CSS_day3-4

d. 元素设置浮动可以实现模式的转换

Web前端之CSS_day3-4

3.4 浮动的作用

制作网页导航,网页布局

3.5 清除浮动的影响

a. 直接给父盒子一个高度 (不推荐)

Web前端之CSS_day3-4

b. 使用clear属性清除浮动 (不推荐) clear:both

Web前端之CSS_day3-4

c. 给父盒子(同a)设置overflow:hidden(如果页面中没有定位的盒子,可以使用这个)

d. 使用伪类清除浮动(推荐使用)(给谁清除浮动,谁调用)

Web前端之CSS_day3-4

4css样式初始化

作用:统一样式风格,浏览器兼容性

Web前端之CSS_day3-4

5overflow简单介绍

作用:设置文字内容超出盒子部分时如何显示

overflow:hidden   将超出的部分进行隐藏

overflow:scroll   不隐藏,添加滚动条显示

overflow:auto     自动判断是否添加滚动条

6、定位

定位分类:静态/绝对/相对/固定/

与位置相关:left|right|top|bottom

6.1 静态定位

用法:position:static

特点:静态定位其实就是我们标准流的显示方式,如果将一个定位的盒子转换为标准流的显示方式,添加:“position:static”

6.2 绝对定位

盒子之间是一种层级的关系

用法:position:absolute

特点:

a. 单独的标签设置定位的时候,是以浏览器左上角为基准设置定位的

Web前端之CSS_day3-4

b. 盒子嵌套的时候,如果父盒子设置了定位,那么子盒子是以父盒子左上角为基准设置定位的。

Web前端之CSS_day3-4

如果父盒子没有设置定位,那么子盒子以浏览器左上角为基准设置定位的

Web前端之CSS_day3-4

c. 设置了绝对定位的盒子,不占原来的位置

          Web前端之CSS_day3-4

d. 设置了绝对定位的盒子可以实现模式的转换

           Web前端之CSS_day3-4

6.3 相对定位(就是微调元素位置的。让元素相对自己原来的位置,进行位置调整)

用法:position:relative

特点:

a. 以自己左上角为基准设置定位

b. 相对定位占原来的位置(即“相对定位不脱标”)

Web前端之CSS_day3-4

c. 相对定位不能实现模式的转换

d. 子绝父相(子元素设置绝对定位,父元素设置相对定位)

position: relative;
           top:-200px;       → 负数就是相反的方向,如果是正,就是下边,如果是负数就是上边

           right:-200px;

6.4 固定定位

用法:position:fixed

特点:

a. 固定定位不占位置

b. 可以实现模式的转换

小总结:实现模式转换的方式如下

a. display:block|inline-block|inline

b. float(浮动):left|right

c. position(定位):absolute(绝对定位)|fixed(固定定位)

Web前端之CSS_day3-4的更多相关文章

  1. Web前端需要熟悉大学里【高大上】的计算机专业课吗?

    作为一名刚刚大学毕业,进入新的学习阶段的研究生,我必须说大学的专业课非常重要!不管你信不信,事实就是如此! 一.大学学习的专业课非常重要,它决定了我们能走到什么高度 前端的发展非常快,我常常觉得刚刚关 ...

  2. web前端开发分享-目录

    1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发分享-css,js提高篇 4. web前端开发分享-css,js工具篇 5. web前端 ...

  3. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  4. web前端的春天 or 噩梦

    「 微信应用号可以做什么」 简单说,微信"小程序"可以为开发者提供基于微信的表单.导航.地图.媒体和位置等开发组件,让他们在微信的网页里构建一个 HTML 5 应用.同时微信还开放 ...

  5. Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

  6. 也许你需要点实用的-Web前端笔试题

    之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...

  7. 用grunt搭建web前端开发环境

    1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...

  8. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  9. &lbrack;转载&rsqb;Web前端开发工程师编程能力飞升之路

    [背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...

  10. web前端开发中常用的尺寸和位置

    我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...

随机推荐

  1. python 端口扫描

    #!/usr/bin/env python #-*- coding:utf-8 -*- import socket #iptable=[] nmapport=[21, 22, 23, 80, 110] ...

  2. php实现设计模式之 工厂方法模式

    <?php /* * *工厂方法模式,创建型模式 定义一个用于创建对象的工厂接口,让子类决定实例化哪一个类.Factory Method使用一个类的实例化延迟到其子类 * * 四个角色: * 工 ...

  3. SQL Server智能感知如何更新

    经常用sql server发现一个问题,比如说我刚刚添加个表或者字段,这时候在sqlserver里面写sql语句时,没有智能提示,这个问题我以前一直不是太注意.今天好好找了下解决方法,这里做下分享. ...

  4. Abstract&lowbar;Factory

    #include <iostream> using namespace std; #define DESTORY_POINTER(ptr) if (ptr) { delete ptr; p ...

  5. 【Linux高频命令专题&lpar;2&rpar;】awk

    简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...

  6. windows下后台运行程序

    方法一:使用vbs启动,新建一个vbs脚本,内容如下: set ws=WScript.CreateObject("WScript.Shell") ws.Run 方法二:将程序注册成 ...

  7. Django深度剖析-二

    WEBserver处理过程 先写个大家熟悉的socketserver例子 #! /usr/bin/env python # encoding: utf-8 """ @Au ...

  8. rds下载备份集

    python版本[testuser@localhost tmp]$ python -VPython 2.7.5 需要提前安装RDS[root@localhost ~]# yum -y install ...

  9. Html——拖放

    设置元素为可拖放 首先,为了使元素可拖动,把 draggable 属性设置为 true : <img draggable="true" /> 拖动什么 - ondrag ...

  10. Java NIO&period;2 —— 文件或目录拷贝操作

    拷贝整个文件树是可以递归每个目录和文件调用 Files.copy()方法.在使用的时候有一下注意事项. 在往目录拷贝文件之前,首先要保证目录已经存在.拷贝源目录(不论是否为空)都会生成目标目录.整个任 ...