HTML/CSS 基础篇二

最新推荐文章于 2022-10-27 14:50:14 发布
最新推荐文章于 2022-10-27 14:50:14 发布
阅读量265 收藏
点赞数 2
分类专栏： html/css基础知识 文章标签： html css 面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44813417/article/details/107859840
版权

HTML/CSS 基础篇二

BFC

官方解释：它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。

目的：形成一个完整独立的空间，让空间中的子元素不会影响到外部的布局。（外面的元素不会影响到里面的元素，里面的元素也不会影响到外面的元素。）

创建BFC：

  • float：left/right
  • position：absolute/fixed
  • block：line-block/flex/table-cell
  • overflow：auto/hidden/scroll

解决问题：
浮动元素高度坍塌问题
清除浮动

布局自适应问题
一般为左侧固定，右侧自适应。
利用块级元素尽可能的沾满一行的特性。右边的宽度可以随着页面宽度的变化而变化。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BFC</title>
  <style>
    .out {
      height: 300px;
    }
    .left {
      height: 100%;
      width: 200px;
      background-color: #c5d2ff;
      float: left;
    }
    .right {
      height: 100%;
      background-color: #ff8784;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="out">
    <div class="left"></div>
    <div class="right">lyz</div>
  </div>
</body>
</html>

其他方法实现自适应

  • 左侧浮动 右侧margin-left
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>左侧浮动 右侧margin-left</title>
  <style>
    .out {
      height: 300px;
    }
    .left {
      height: 100%;
      float: left;
      width: 200px;
      background-color: #ff8784;
    }
    .right {
      height: 100%;
      margin-left: 200px;
      background-color: #859cff;
    }
  </style>
</head>
<body>
  <div class="out">
    <div class="left"></div>
    <div class="right">lyz</div>
  </div>
</body>
</html>
  • 左侧绝对定位 右侧margin-left
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>左侧绝对定位 右侧margin-left</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .out {
      height: 300px;
    }
    .left {
      height: 300px;
      width: 200px;
      background-color: #ff8784;

      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
    }
    .right {
      height: 100%;
      margin-left: 200px;
      background-color: #859cff;
    }
  </style>
</head>
<body>
  <div class="out">
    <div class="left"></div>
    <div class="right">lyz</div>
  </div>
</body>
</html>
  • 右侧顶线和右边为0 left为200
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>右侧元素设置顶线和右侧位置为0 左线位置为200px</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .out {
      height: 300px;
    }
    .left {
      height: 100%;
      width: 200px;
      background-color: #ff8784;
    }
    .right {
      /*width: 100%;*/
      height: 300px;
      background-color: #859cff;
      position: absolute;
      right: 0;
      top: 0;
      left: 200px;
    }
  </style>
</head>
<body>
  <div class="out">
    <div class="left"></div>
    <div class="right">lyz</div>
  </div>
</body>
</html>
  • flex
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex</title>
  <style>
    .out {
      height: 300px;
      display: flex;
    }
    .left {
      height: 100%;
      width: 200px;
      background-color: #c5d2ff;
    }
    .right {
      flex: 1;
      height: 100%;
      background-color: #ff8784;
    }
  </style>
</head>
<body>
  <div class="out">
    <div class="left"></div>
    <div class="right">lyz</div>
  </div>
</body>
</html>

解决外边距（margin）垂直方向重合的问题
兄弟元素在垂直外边距取得是绝对值最大值而不是和
通过触发BFC来防止他们之间的相互影响。
例如：为其中一个元素外面包裹父元素，设置overflow：hidden

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .fa {
      overflow: hidden;
    }
    .bfc {
      width: 100px;
      height: 100px;
      background-color: #ff8784;
    }
    .bfc:nth-child(1) {
      margin-bottom: 10px;
    }
    .bfc:nth-child(2) {
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div class="fa">
    <div class="bfc"></div>
  </div>
  <div class="bfc"></div>
</body>
</html>

另一种：用padding代替margin，简单易懂但是本身就需要设计padding，就不能使用来。

DIV水平垂直居中

  • 定位
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .two {
      width: 300px;
      height: 300px;
      background-color: #ff8784;
		
	  /*必须有盒子的父元素的宽高 但是无需考虑*/
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="one">
    <div class="two"></div>
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .two {
      width: 300px;
      height: 300px;
      background-color: #ff8784;

      position: absolute;
      left: 50%;
      top: 50%;
      /*必须知道宽高 一下为宽高的一半值*/
      margin-left: -150px;
      margin-top: -150px;
    }
  </style>
</head>
<body>
  <div class="one">
    <div class="two"></div>
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .two {
      width: 300px;
      height: 300px;
      background-color: #ff8784;
      
	  /*不需要具体宽高 内容撑开即可*/
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div class="one">
    <div class="two">xx</div>
  </div>
</body>
</html>
  • display：flex
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .one {
      width: 600px;
      height: 600px;
      background-color: #e74f2c;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .two {
      width: 300px;
      height: 300px;
      background-color: #ff8784;
    }
  </style>
</head>
<body>
  <div class="one">
    <div class="two"></div>
  </div>
</body>
</html>
  • display：table-cell
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
  	/*父级必须有固定宽高*/
    .one {
      width: 600px;
      height: 600px;
      background-color: #e74f2c;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .two {
      width: 300px;
      height: 300px;
      background-color: #ff8784;

      display: table-cell;
      vertical-align: center;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="one">
    <div class="two"></div>
  </div>
</body>
</html>

display/visibility/opacity区别

display:

  • DOM结构：浏览器不会渲染dispaly：none的元素 不占据空间
  • 事件监听：无法进行DOM事件监听
  • 性能：动态改变此属性会重排，性能差。
  • 继承：不能继承
  • transition：不支持

visibility:

  • DOM结构：元素隐藏 但是会渲染 占据空间

  • 事件监听：无法进行DOM事件监听

  • 性能：动态改变会引起重绘，性能较高。

  • 继承：可以继承，子元素visibility：visible时则会显示。

  • transition：立即显示，隐藏会延时。

  • opacity:

  • DOM结构：元素透明度为0 元素隐藏 占据空间

  • 事件监听：可以进行DOM事件监听

  • 性能：提升为合成层，不会触发重绘，性能较高。

  • 继承：可以继承，但子元素不能设置opacity：1来取消隐藏

  • transition：可以延时显示和隐藏

响应式布局方式

  • madia 媒体查询
  • 百分比
  • rem 相对html元素的字体大小
  • vh/vw
  • flex

px和em的区别

px是固定长度单位
em不固定，根据父元素字体大小决定。

rgba和opacity区别

opacity作用与元素以及元素所包含的内容
rgba只是作用域元素的颜色或背景颜色（不会继承）

如何实现小于12px的字体大小

transform: scale();
但是相应的容器也会变小

一只烛
关注
专栏目录
html隔离样式,html – 如何将div与公共CSS样式隔离？
weixin_36383252的博客
06-15 1160
CSS Cascading and Inheritance Level 3推出了the all shorthand property和the unset keyword，它们可以一起实现这一点。For example, if an author specifies all: initial on an element it willblock all inheritance and reset a...
【前端】面试题 html/css/js基础知识篇
最新发布
Shinersmile的博客
02-06 5344
前端有关css、html,、javascript的面试知识总结。
CSS十大密技
weixin_33973600的博客
11-30 133
1. css 字体简写规则 当使用css定义字体时你可能会这样做： font-size: 1em;line-height: 1.5em;font-weight: bold;font-style: italic;font-variant: small-caps;font-family: verdana,serif; ...
在html中添加class,在HTML标识符的Class中加入Styles
weixin_42128141的博客
07-03 1325
来源:远方网络|2005-6-3 22:07:17|(有1916人读过)在HTML标识符的Class中加入Styles假设你想为网页上特定的段落设定规则，而不是全部的内容。例如，你可能想让网页上的第一段以24点大小的字体显示，而第二段则以14点的大小显示，要利用Style Sheets实现这一点，你必须找到一种方法来区别不同的标识符。一个特殊的属性专门为这一目的而被引入，每一 个HTML标...
网页改divclass属性和link属性
gulanga5的博客
07-06 994
一.用dom操作实现p标签文字改大小, link标签改href属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>dom操作</title> <link rel="stylesheet" type="text/css" href="css/none.css" id="link"/> <style type="text/css">
HTML/CSS学习汇总（5）
CodeWars 搬运工
11-17 374
对HTML的标签元素增加id属性，可以针对这个元素做样式的改变：<h1 id="botswana">Botswana</h1>修改样式时，只需将选择器改成#+id就行：#botswana { background-color: #56ABFF; }修改多个元素的样式时，可以为它们添加class属性：<h1 class="science">Scientist Discovers Importa
Html/Css(新手入门第一篇必看攻略)
09-28
本文是一篇面向初学者的HTML/CSS入门教程，旨在帮助新手理解并掌握基础的网页制作知识，包括Web标准的含义、CSS的使用和特性、样式的优先级规则、文本控制和伪类的使用等内容。下面详细展开知识点： 1. Web标准的...
疯狂HTML5/CSS3/JS讲义光盘代码
01-09
通过"疯狂HTML5/CSS3/JS讲义光盘代码"，学习者可以深入学习每一个章节的实战示例，这些代码涵盖了从基础语法到高级特性的应用。例如，HTML5的新标签如何构建更语义化的结构，CSS3的媒体查询如何实现响应式设计，以及...
html第二天
c9087的博客
07-19 112
html
html+css学习第二节
m0_74110356的博客
10-27 1524
html 和css学习第二节
关于HTML标记的属性是如何分类的,如何使用HTMLspan标签的class属性？这里有关于class属性的详解...
weixin_36468605的博客
06-11 352
本篇文章主要为大家讲述的就是关于HTML span标签的class属性的一些用法，这个是需要配合css样式一起来使用的，现在可以稍微说点css样式的基本，对有过基础的人来说都很容易。那现在就让我们一起来看看这篇文章吧首先我们来看看关于HTML span标签的class属性的意思:span英文为跨度 的意思，但是在网页制作中它是html标签的一种完整标签为 标签被用来组合文档中的行内元素。class...
web实验5
p1534179877的博客
04-27 404
<style type="text/css"> body{margin: 0;} .div{ display: flex; flex-direction: column; align-items: center; width: 600px; top: 20px; position: absolute; left: calc(50% - 300px); } table{
html+css常见布局实现方法
路漫漫其修远兮，吾将上下而求索
07-31 695
前言 这是一篇关于html+css布局的总结博文，这些布局在日常开发中非常常见。本文提供的方法只是其中一种，现实中解决问题的办法往往不止一种,需要具体问题具体分析。 本文主要讲述的布局 1.字体居中:水平居中、垂直居中； 2.多个div元素水平分布； 3.单个div元素居中：水平居中、垂直居中； 背景是以上所有情况外面都套着一层div，如下： 1.情况一: <div> 一段文字 </div> 2.情况二： &l..
原生前端练习
yuxiaoc的博客
08-28 198
虽然原生的js css html 简单 但是万层高楼平地起，如果连基础都弄不明白又何去学vue react 等整合前端呢？ 响应式： 效果图： 代码： <!DOCTYPE html> <html lang="cn" xmlns:c="http://www.w3.org/1999/XSL/Transform"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi
css3 均匀设置子元素排列
我也很绝望啊的博客
07-16 1019
要达到的目的 css3样式设置子元素的间隔，首尾元素左右不设置间隔 css样式
关于如何处理大屏head盒子和body盒子在同背景色值情况下如和进行区分
weixin_47389477的博客
11-13 146
首先看下遇到的情况 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子</title> <style> .big_box{ positi.
前端学习详细知识点讲解-CSS(第六天）
hualidezhen的博客
04-28 199
伸缩盒以及动画 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 目录 伸缩盒以及动画 文章目录 一、伸缩盒 二、动画 1.属性 2.属性 总结 一、伸缩盒 什么是伸缩盒：在移动端进行布局 1）语法 display：fled 2）父元素的样式 d...
web前端进阶_html_基础篇1
热门推荐
qq_17495489的博客
08-12 26万+
HTML基础 一、HTML基础语法 1. 什么HTML HTML（Hypertext Markup Language） - 超文本标记语言 标记语言 - 在不同的文本中加不同的标记让文本的意义和功能不同, 例如：markdown、html HTML大小不敏感： html ==Html == HTML == hTMl (小写和大写功能一样) 2. 标签 - 就是标记， 标签是HTML的基本结构，不同的标签功能不一样 语法： 双标签(标准标签): <标签名 属性1=属性值1 属性2=属性值2 …&
HTML/CSS基础：属性、样式与链接效果解析
这篇资源涵盖了HTML、CSS和JavaScript的基础知识，适合初学者学习。HTML是一种标记语言，用于构建网页的内容结构，如标题、段落和表格。CSS则用于控制网页的样式和布局，使得内容与表现分离，提高网页的可读性和维护...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值