首页 > 其他分享 >1.Html、CSS

1.Html、CSS

时间:2024-04-14 23:12:09浏览次数:15  
标签:flex auto 默认 Html wrap CSS

HTML

div块状元素(独占一行)

Span行

H1-h6标题

i斜体

Strong加粗

a超链接

Img图片

Video视频

Textarea表单域(多行)

Button按钮

input输入框

placeholder框内灰色提示字

CSS

上右下左

margin外边距

padding内边距

word-wrap: break-word自动换行

border 边框

solid实线、radius边框弧度、

阴影box-shadow: 10px 10px 5px #888888

分别对应右偏移度、下偏移度、阴影模糊度、颜色

Flex布局

display: flex开启flex布局(要搞清楚和flex:1的区别)

flex-direction 默认为row(水平靠左),row-reverse水平靠右,column垂直靠上

flex-wrap: wrap自动换行

项目属性flex[1]

描述
flex-grow 默认0,决定项目在有剩余空间的情况下是否放大
flex-shrink 默认1,决定项目在没有剩余空间的情况下是否缩小
flex-basis 默认auto,项目的宽度,设置后会覆盖width。

flex:1——1 1 auto;等比放大、等比缩小

flex:none——0 0 auto;固定大小,不放大不缩小。

CSS布局元素

水平居中:margin:auto

宽度width有固定值和百分比

overflow:hidden隐藏超出容器的元素

overflow:scroll在原有基础上给一个可以滑动的条

image-20240414214514431

文字

line-height 行高

font-size字体大小

font-weight字体粗细normal(正常)、blod(加粗)

position:absolute 相对于正常位置定位,配合top、bottom、left、right使用


本节参考资料——

【带小白做毕设】1. Html、CSS网页布局速成

参考文档


  1. 五分钟掌握 css3 flex弹性布局 超详细! ↩︎

标签:flex,auto,默认,Html,wrap,CSS
From: https://www.cnblogs.com/youngtruck/p/18134892

相关文章

  • HTML 高级用法 iframe框架
    HTML中,<iframe>标签允许一个HTML文档被嵌入到另一个HTML文档中。这种技术可以用于多种用途,比如嵌入第三方内容(例如YouTube视频或Google地图)、实现网页中的多窗口布局,或者加载异步内容而不影响主页面的加载时间。<iframe>的高级用法可以增强网站的功能性和用户体验,但也需要注意使......
  • html
    <head><!编码格式><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>inde</title></head><body>&......
  • HTML&CSS基础(HTML5和CSS3新增内容)
    HTML5一、新增的语义化标签标签名语义单/双标签header整个页面,或者分区域的头部双footer整个页面,或者部分区域的底部双nav导航双article文章、帖子、杂志、新闻、博客、评论双section页面中的某段文字,或者文章中某段文字双aside侧边栏双......
  • HTML&CSS基础(CSS2)
    1.CSS是什么层叠样式表样式:文字大小、背景颜色、元素宽高层叠:一层层”叠“上去2.样式位置2.1行内样式写在标签的style属性中,又称内联样式<divstyle="color:red;font-size:17px"></div>2.2内部样式<head><style>div{color:red;......
  • HTML&CSS基础(HTML3)
    1.前言学习路线:HTML4(排版标签)CSS2(盒子模型)HTML4(HTML5优势)CSS3(弹性盒子)marquee标签滚动条效果(废弃,不再使用)标签=元素 loop属性:循环次数;bgcolor属性:背景色当标签中出现多个重复的属性,只显示一个属性2.IDE(VScode)2.1调整字体设置->控制字体大小(建议22......
  • matplotlib中渐变颜色条转CSS样式(hex格式)——同mapbox中cog的颜色条拉伸显示
    matplotlib中渐变颜色条转CSS样式(hex格式)——同mapbox中cog的颜色条拉伸显示应用场景:1.适用于mapbox中显示cog影像时,colormap_name拉伸颜色条转换2.适用于Python可视化matplotlib内置颜色条转换以colormap_name=Blues为例转换代码如下:使用python,需要安装matplotlib和numpy......
  • tailwindcss/React 性能优化
    tailwindcssvscode空格才出提示https://v2ex.com/t/1027326#reply4"editor.quickSuggestions":{"strings":true}React性能优化实用技巧在开发React应用时,性能优化是一个永恒的话题。本文将分享几个实用的工具和技巧,帮助你提升React应用的性能。ReactDeveloperToo......
  • 格式化HTML代码 ,美化JS代码教程
    直接上地址美化HTMLhttps://htmlformatter.com/美化JShttps://beautifier.io/1.美化HTML使用教程把html代码输入到代码框点击format然后等待格式化然后点击Download下载按钮2.美化JS使用教程把代码输入到代码框点击右边的BeautifyJavascript按钮,选择美化代码的种......
  • htmlentities和htmlspecialchars 的区别有哪些
    htmlspecialchars只转化下面这几个html代码,而htmlentities却会转化所有的html代码,连同里面的它无法识别的中文字符也给转化了。'&'(ampersand)becomes'&amp;''"'(doublequote)becomes'"'whenENT_NOQUOTESisnotset.''......
  • directive自定义指令把文案转html+输入功能
    文案: "甲方(贷款人):全称:$var<text_aasdrup06rc00>法定代表人/负责人:$var<text_k2s9cffkhls00>地址:$var<text_6356yvx7oag00>\n\n乙方(借款人):全称/姓名:(变量-姓名),身份证号码/统一社会信用代码:(变量-身份证)地址:$var<text_1g9bed61qp7k0>\n\n鉴于:\n\n甲方与乙方于 $var<date_3ld......