css层叠样式表、盒子模型

最新推荐文章于 2024-10-10 23:52:19 发布
最新推荐文章于 2024-10-10 23:52:19 发布
阅读量207 收藏
点赞数
文章标签： css css3 前端 vscode html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/flippy17/article/details/121778530
版权

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

下面是浮动练习代码。

这是最终效果 

<style>

    .con {

        width: 800px;

        height: 750px;

        background-color: #ffaad9;

        margin: 20px auto auto;

    }

    .con_left {

        width: 200px;

        height: 700px;

        background-color: #f3a5bc;

        padding: 0;

        float: left;

        text-align: center;

    }

    .con_center {

        width: 595px;

        height: 330px;

        float: left;

        margin-left: 0.3em;

    }

    .con_right {

        width: 595px;

        height: 370px;

        float: left;

        margin-left: 0.3em;

    }

    .logo {

        color: aliceblue;

        font-size: 70px;

        font-weight: 700;

        margin-top: 10px;

    }

    .cat {

        color: aliceblue;

        margin-top: 10px;

        font-size: 15px;

    }

    .ul {

        margin-top: 50px;

        color: aliceblue;

    }

    .img {

        float: left;

        padding: 5px;

    }

    p {

        font-weight: bold;

        color: aliceblue;

    }

</style>

关于层叠样式表的思维导图

关于浮动样式

接下来是盒子模型练习。效果如下

 CSS部分代码

.y01{

    width: 500px;

    height: 100px;

    background-color:palevioletred;

    overflow: hidden;

    margin: 1px auto;

    padding: 20px;

    text-align: center;

}

.y02{

    width: 500px;

    height: 100px;

    background-color:pink;

    overflow: hidden;

    margin: 1px auto;

    padding: 20px;

    text-align: center;

}

.y03{

    width: 500px;

    height: 100px;

    background-color: palevioletred;

    overflow: hidden;

    margin: 1px auto;

    padding: 20px;

    overflow: hidden;

    text-align: center;

}

html部分代码

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=, initial-scale=1.0">

    <link rel="stylesheet" href="盒模型.css">

    <title>盒模型练习</title>

</head>

<body>

    <div class="y01">头部</div>

    <div class="y02">主体</div>

    <div class="y03">底部</div>

</body>

在学习页面布局时要注意

 

 归结出以上思维导图希望大家认识学习

 感谢您的阅读！

 

fliqpy17
关注
css层叠样式表 盒子模型
adsdsasada的博客
11-27 255
CSS 一、CSS是Cascading Style Sheet的简称，称为“层叠样式表”或者“级联样式表”，是一组格式设置规则，用于控制网页内容的外观，可将页面内容与表现形式分离。 二、1985年5月12日，W3C组织推出了CSS2,使得这项技术在世界范围内得到广泛的应用。 三、CSS3提供了非常多新途径去改善你的设计工作，且做了不少重要的变化。 优点 1、样式复用，有效的避免代码臃肿 2、方便网站的后期维护 3、对页面进行精准控制，实现精美、复杂的页面 基本语法 修改的样式：值； 根据书写位置分为 外部样
CSS层叠样式表
Han_Zhou_Z的博客
10-08 972
一、CSS层叠样式表（cascading style sheet） 1、CSS的主要作用 （1）可以美化页面的外观 （2）可以统一页面的风格 （3）可以实现内容和样式的分析，更适合团队的开发 2、CSS的使用方法 （1）行内嵌入式 给标签添加style属性，用来设置样式 <p style="color: aqua; font-size: 20px;">CSS展示</p> 但这种方法只对目前嵌入的标签有效 （2）页面嵌入式 在页面中使用<style&gt.
CSS（层叠样式表）之盒子模型
如果我是DJ你会爱我吗
05-30 183
1.ul去除自带样式: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ul去除自带样式</title> <style> ul{ list-style-ty...
CSS（层叠样式表）——4盒模型
inexaustible的博客
11-30 344
盒模型 盒子与盒子之间如果是父子关系就是padding；如果是兄弟关系就是margin 块元素：此元素特别的霸道,单独占用一行;如:div,p, 行内元素：此元素特别的窝囊,给多大地就使用多大地;如span,a 案例： <!DOCTYPE html> <html lang="en"> <head> <meta charse...
CSS层叠样式表--盒子模型
weixin_43903745的博客
07-18 459
CSS--盒子模型一、盒子模型1、看透网页布局的本质2、盒子模型的组成3、边框4、表格的细线边框5、边框会影响实际盒子大小6、内边距（padding） 一、盒子模型 页面布局要学的三大核心，盒子模型、浮动、定位，学好盒子模型能够非常好的帮助我们布局页面 1、看透网页布局的本质 网页布局的过程： 准备好相关的网页元素，网页元素基本都是盒子Box 利用CSS设置好盒子样式，让后摆到相应的位置 往盒子里面装内容 网页布局的核心本质： 就是利用CSS摆盒子 2、盒子模型的组成 所谓盒子就是把HTML页面中的布局
css盒子样式有哪些,盒子模型 CSS样式和列表
weixin_29266007的博客
08-03 877
所有HTML标签都是盒子模型div标签自定义盒子模型class和id的主要差别是：class用于元素组(类似的元素，或者可以理解为某一类元素)，而id用于标识单独的唯一的元素。盒子模型组成部分：自身内容：width、height 宽高内边距： padding盒子边框： border 边框线与其他盒子距离： margin 外边距内容+内边距+边框+外边距=面积border边框：常见写法：border...
CSS-层叠式样式表
乐于探索,乐于奉献,追求极致,向往生活
01-03 879
前言： 之前我们通过HTML语言，来编写静态网页，但是仅仅有静态网页，却不免让我们陷入一种毫无感觉，甚至有点冲动关掉网页的想法，那么怎么搞定这个想法那，此时你仅仅需要设置网页（元素）的样式就可以，以此成功的打消掉这个无理的想法。 其实，我们也可以通过元素“属性”的设置来改变不同的样式，但....，终究还是过于繁琐和呆板，除此外，相同的操作，要重复的写。那么？什么是CSS（Cascading S...
css层叠样式表盒子模型,CSS层叠样式表-盒子模型
weixin_30891153的博客
08-04 192
盒子模型作用：实现网页布局，在网页中画盒子组成：边框 border内边距 padding外边距 margin1.边框.test{width: 300px;height: 300px;border-color: red;border-width: 2px;border-style: solid;/*border-style: dotted; 点线*//*border-style: dashed;/*...
css层叠样式表学习笔记
我的个人博客
04-20 1179
为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
自学前端CSS层叠样式表
12-13
在前端开发领域，CSS（Cascading Style Sheets）层叠样式表是不可或缺的一部分，它用于控制网页元素的外观和布局。CSS使得HTML或XML（包括SVG、MathML等各种XML方言）文档具有丰富的呈现效果，包括字体、颜色、大小...
CSS3(上)CSS3是CSS（层叠样式表）技术的升级版本.md
08-21
CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了 CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多 栏布局等模块 [1] 。 CSS演进的...
高频CSS总结
qq_51384850的博客
10-10 773
盒模型、BFC、选择器权重计算方式、清除浮动、垂直居中、CSS3新特性、隐藏页面元素、em/px/rem/vh/vw区别、flex布局、CSS提高性能、画一个三角形、两栏布局：左边定宽，右边自适应方案
CSS3-Day1
m0_74039531的博客
10-10 529
CSS3圆角CSS3盒阴影box-shadowCSS3边界图片CSS3 background-clip属性padding-box 沿着边框填充content-box 在边框外面。
前端_002_CSS扫盲
qq_42936379的博客
10-10 761
text-align 水平对齐和vertical-align 垂直对齐。选择器{ 属性名:属性值;class选择器 .[class_name]属性选择器 [arrtribute_name]也可以在标签里通过style属性进行样式设置。id选择器 #[id_name]四种链接状态分别是：，拿a标签举例。height和width。元素选择器 [tag]2.文件后缀.css。
CSS响应式布局
2401_82561004的博客
10-10 448
CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验，而且随着大屏智能手机的普及，用“大势所趋”来形容也不为过。接下来我们以媒体查询为例来具体演示一下响应式布局的实现。
关于css文字下划线动画实现
梦雨的博客
10-10 274
【代码】关于css文字下划线动画实现。
【CSS Tricks】鼠标滚轮驱动css动画播放，使用js还是css？
最新发布
qbbmnnnnnn的博客
10-10 518
animation-timeline，目前还处于试验阶段。指定用于控制CSS动画进度的时间轴。CSS的创建者曾说过，他最初的设想是CSS作为控制网页行为的主要Web技术。只有当CSS无法完成控制行为时，才使用js脚本作为后备手段。如果在不考虑浏览器支持性的前提下（优先使用chrome最新版本浏览器），项目中有做滚动条绑定动画的需求，我非常建议大家尝试一下，它会给你一种全新的开发体验，在实现相同效果的情况下，页面性能优化最佳。再接再厉~
css如何制作瀑布流
BANaanaa的博客
10-06 1001
‌瀑布流是一种网站页面布局方式，视觉表现为宽度相等、高度不定的元素组成的参差不齐的多栏布局。‌ 随着页面向下滚动，新的元素会附加到最短的一列，不断向下加载‌。‌参差不齐的排列方式‌：元素的高度各不相同，形成一种动态的视觉效果。‌流式布局的扩展性‌：用户可以不断向下浏览，加载更多内容。‌适用于图片为主的网站‌：常见于一些图片、新闻、博客等内容的展示，有效利用空间，提高用户体验‌纯css写法/* 分为3列 *//* 列之间的间隙 *//* 清除默认的内边距 */padding: 0;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值