首页 > 其他分享 >css浮动的特点

css浮动的特点

时间:2023-01-03 12:32:17浏览次数:40  
标签:浮动 color height 特点 width 460px background margin css

css浮动的特点_html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" cnotallow="IE=edge">
<meta name="viewport" cnotallow="width=device-width, initial-scale=1.0">
<title>浮动</title>
<style>
* {
margin: 0;
padding: 0;
}
.top {
height: 40px;
background-color: #333;
}
.header {
width: 1226px;
height: 100px;
background-color: #ffc0cb;
margin: 0 auto;
}
.content {
width: 1226px;
height: 460px;
background-color: green;
margin: 0 auto;
}
.left {
width: 234px;
height: 460px;
background-color:#ffa500;
float: left;
}
.right {
width: 992px;
height: 460px;
background-color: #87ceeb;
float: left;
}
</style>
</head>
<body>
<div class="top">头部</div>
<div class="header"></div>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
<!-- left 和right是content的子元素 -->
<!--
书写顺序
1.浮动/display
2.盒子模型 magin border pdding 宽度高度背景色
3.文字样式 -->

标签:浮动,color,height,特点,width,460px,background,margin,css
From: https://blog.51cto.com/u_15928062/5985275

相关文章

  • HTML学习之基础元素,CSS,图像,链接
    什么是HTML?HTML是用来描述网页的一种语言。HTML指的是超文本标记语言:HyperTextMarkupLanguageHTML不是一种编程语言,而是一种标记语言标记语言是一套标记标签(ma......
  • CSS中常见单位的理解和辨识
    前言最近在学习前端,很多代码中引用了"奇奇怪怪"的单位,也是一个个百度才得知其含义.本篇参照了很多大佬的博客记录一个笔记方便以后查阅.背景介绍传统的项目开发中,我们只会......
  • js/css实现图片轮播
    实现样式:tplb.cssul,li{padding:0;margin:0;list-style:none;}.adver{margin:0auto;width:700px;overflow:hidden;h......
  • CSS的总结1
    1.CSS的行内样式2.CSS的内部样式表3.CSS的外部连接式在头部用link的方式进行连接外部的CSS样式。将外部CSS的路径输入到href里。4.CSS的字体样式属性4.1font-size:字......
  • HTML/CSS
    HTML基本框架<!doctypehtml><html><head><metacharset="utf-8"><title>无标题文档</title></head> <body></body></html>段落标记:<p></p>预留格式(文本中......
  • 第20章_ CSS-练习
    ​  层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可......
  • 第20章_ CSS-练习
    ​  层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可......
  • 浮动,浮动初衷:文字环绕图片
    ​  【1】什么是浮动?浮动设计的初衷为了解决文字环绕图片问题,浮动后一定不会将文字挡住,这是设计初衷,不能违背的。CSS的Float(浮动)使元素脱离文档流,按照指定的方向(......
  • 浮动,浮动初衷:文字环绕图片
    ​  【1】什么是浮动?浮动设计的初衷为了解决文字环绕图片问题,浮动后一定不会将文字挡住,这是设计初衷,不能违背的。CSS的Float(浮动)使元素脱离文档流,按照指定的方向(......
  • 引入,CSS的书写方式
    ​  【1】为什么要学习CSS?HTML画页面--》这个页面就是页面上需要的元素罗列起来,但是页面效果很差,不好看,为了让页面好看,为了修饰页面---》CSSCSS的作用:修饰HTML页面......