前端设计，box-sizing 理解，float：left与margin-left配合

最新推荐文章于 2022-09-21 23:26:01 发布
最新推荐文章于 2022-09-21 23:26:01 发布
阅读量428 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiujiuyibai/article/details/117127928
版权


<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="format-detection" content="email=no" />
  <title></title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .l-wrapper{
      max-width: 1200px;
      min-width: 960px;
      margin-right: auto;
      margin-left: auto;
      margin-top: 30px;
    }
    body{
      line-height: 1.5;
      font-size: 14px;
    }
    ._clearfix:after,._clearfix:before{
      content:" ";
      display:table;
    }
    ._clearfix:after{
      clear:both;
    }
    .myPanel{
      overflow: hidden;
    }
    
    .myPanel_side{
      float: left;
      width: 25%;
    }
    
    .myPanel_main{
      margin-left: 25%; /* 此处如果不写margin-left:25%会导致右边元素显示不正确*/
    }
    .myMenu{
      border: 1px solid #e0e0e0;
      border-bottom: 0;
    }
    .myMenu>li{
      display: block;
      line-height: 45px;
      border-bottom: 1px solid #e0e0e0;
      padding: 0 20px;
    }
    .myMenu>li>a{
      color: #333;
      font-size: 18px;
      text-decoration: none;
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow:ellipsis;
    }
    .myForm_left{
      float: left;
      width: 60%;
      padding: 0 20px;
    }
    .myForm_right{
      float: right;
      width: 40%;
      padding: 0 10px;
    }
    .myForm_grp{
      line-height: 40px;
    }
    .myForm_table table{
      width: 100%;
    }
    .myForm_table table>tbody>tr>td{
      line-height: 46px;
      padding: 0 8px;
    }
    .myForm_table table>tbody>tr>td.is-tit{
      white-space: nowrap;
      text-align: right;
      width: 1px;
    }
    .myForm_rads{
      margin-bottom: 15px;
    }
    .myForm_rads>label{
      display: block;
      line-height: 45px;
      border-bottom: 1px dashed #eee;
    }
    .myForm_rads>label>input{
      vertical-align: middle;
    }
    .myForm_rads>label>span{
      vertical-align: middle;
    }
    .form_control{
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      width: 100%;
      padding: 5px 12px;
      font-size: 14px;
      line-height: 1.42857;
      color: #555555;
      background-color: #fff;
      background-image: none;
      border: 1px solid #ccc;
    }
  </style>
</head>

<body>
  <div class="l-wrapper">
    <div class="myPanel">
      <div class="myPanel_side">
        <ul class="myMenu">
          <li>
            <a href="javascript: void(0);" οnclick="steelFirstLevelClick(1)">重型</a>
          </li>
          <li>
            <a href="javascript: void(0);"  οnclick="steelFirstLevelClick(2)">中型</a>
          </li>
          <li>
            <a href="javascript: void(0);">版型</a>
          </li>
          <li>
            <a href="javascript: void(0);">炉料</a>
          </li>
          <li>
            <a href="javascript: void(0);">纯净废钢</a>
          </li>
          <li>
            <a href="javascript: void(0);">冲压料</a>
          </li>
          <li>
            <a href="javascript: void(0);">打包压块</a>
          </li>
        </ul>
      </div>
      <div class="myPanel_main">
        <div class="myForm _clearfix">
          <div class="myForm_left">
            <div class="myForm_table">
              <table>
                <tr>
                  <td class="is-tit">&nbsp;</td>
                  <td>
                    <select class="form_control" name="field1">
                      <option value="1">选项一</option>
                      <option value="2">选项二</option>
                      <option selected value="3">选项三</option>
                      <option value="4">选项四</option>
                      <option value="5">选项五</option>
                      <option value="6">选项六</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td class="is-tit">参数1</td>
                  <td><input class="form_control" name="param1" placeholder="请输入" type="text" /></td>
                </tr>
                <tr>
                  <td class="is-tit">参数2</td>
                  <td><input class="form_control" name="param2" placeholder="请输入" type="text" /></td>
                </tr>
                <tr>
                  <td class="is-tit">参数3</td>
                  <td><input class="form_control" name="param3" placeholder="请输入" type="text" /></td>
                </tr>
              </table>
            </div>
          </div>
          <div class="myForm_right">
            <div class="myForm_rads">
              <label>
                <input name="test" type="radio" />
                <span>单选1</span>
              </label>
              <label>
                <input name="test" type="radio" />
                <span>单选2</span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>

九九100
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS理论：margin-left在float中的运用
weixin_30484247的博客
12-20 246
源码如下: margin-left 指的是左边的外边距，为正数时，左边间距增大，div向右偏移，为负数时，左边间距减少，相反往左偏移 双飞翼 .wrap { width: 100%; margin: 0 auto; } .left { width: 15%; height: 700px; background: red; ...
盒子模型&float浮动
m0_62168050的博客
06-06 265
盒子模型&float浮动
float动态布局遇到的box-sizing问题
^璐三岁要耍蓅氓♡
05-14 227
做了个展示页面，希望根据浏览器的宽度动态布局item的大小和数量： @media screen and (max-width: 2560px) { .col { width: calc(100% / 5); } } @media screen and (max-width: 2048px) { .col { width: calc(100% / 4); } } @media screen and (max-width: 1680px) { .col { wid
Margin与float:left同时使用…
12-30 2652
原文地址：IE6有双倍距的bug">Margin与float:left同时使用 IE6有双倍距的bug作者：箜房子IE6有双倍距的bug" TITLE="[转载]Margin与float:left同时使用 IE6有双倍距的bug" /> 关于Margin-left或是Margin-right 与float:left同时使用时，在IE6会有双倍距的bug。 解决方案：在同时使用这两个参数
IE双倍浮动边界问题
fzcbce的博客
09-27 227
IE双倍浮动边界Bug 原址：[url]http://www.positioniseverything.net/explorer/doubled-margin.html[/url] 译文：PorkFat 什么发生故障？ 一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box)，并在浮动元素上使用了左边界(margin-left)来令它和容器的左边...
css-box-model-document-flow
02-15
可以通过`box-sizing`属性来选择使用哪种盒模型。 **文档流（Document Flow）**是指HTML元素在页面上自然排列的方式。根据元素的`display`属性，它们会按照块级流（block-level flow）或行内流（inline flow）进行...
最全前端面试题-2（css篇-上百篇题集整理1个月）
05-04
水平居中对行内元素可以使用`text-align: center`，对块级元素可以使用`margin: 0 auto`或`position: absolute`结合`left: 50%`和`transform: translateX(-50%)`。垂直居中则可以使用`line-height`等于`height`，`...
小程序scroll-view安卓机隐藏横向滚动条的实现详解
10-16
box-sizing: border-box; background: url("../../../static/images/index/worth-bg1.png") no-repeat; background-size: 100% 100%; width: 290rpx; height: 560rpx; margin-right: 20rpx; } } ``` 通过...
一面 3：CSS-HTML 知识点与高频考题解析1
08-04
可以通过`box-sizing`属性来调整盒模型的行为，如设置为`border-box`，元素的宽度和高度将包括内容、padding和border，这样更方便控制元素的总尺寸。 浮动布局（float）是早期实现页面布局的常用方法，`float:left`...
详解CSS中的Box Model盒属性的使用
09-24
总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right 然而，不同浏览器对Box Model的解释可能存在差异。W3C标准遵循的内容宽度计算方法中，元素的宽度仅...
用float和margin实现左右布局
hanker的博客
10-19 1750
用float和margin实现左右布局我一直使用的是float:left或margin来实现左右布局。看别人代码的时候发现了，用两者的特性实现布局的方式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">
css设置水平坐对齐,CSS 水平对齐 (Horizontal Align)
weixin_36280338的博客
08-03 690
CSS 水平对齐 (Horizontal Align)关于 CSS 中元素的水平对齐 (HorizontalAlign)，你可以使用多种属性来进行设置。在CSS中，有几个属性用于元素水平对齐。块元素对齐块元素是一个元素，占用了全宽，前后都是换行符。块元素的例子：文本对齐，请参阅 CSS文本 章节。.在这一章中，我们会告诉你块元素如何水平对齐布局。中心对齐,使用margin属性块元素可以把左，右页...
前端基础之浮动个人相册
clover_oreo的博客
12-07 350
相册的布局同样使用到浮动float
Css margin 和 float浮动
qq_53312143的博客
09-21 814
css float浮动 margin
前端新手坑之float：left
热门推荐
LiuGeFangQie的博客
03-16 3万+
相信很多刚学前端的同学们，都会遇到这样一个问题：我的背景（图片）怎么突然消失不见了，而且找不到原因。 float:left;(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上 例子1代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="...
float:left却不在最左边的原因之一
我的笔记
03-10 1万+
float:left; float:left; 测试代码 显示效果,可以看到红色框不在最左边,在某些情况下,如果看不见第一个float话,就会很郁闷,float第二个不在最左.解决float问题得找与它最近的,有没有另一个的高度超过了顶边
margin-left: auto 右对齐
liubangbo的专栏
02-24 1024
假如有3个div元素，两个放在左边，一个放在右边，怎么做呢？用flex布局。把放在左边的2个div元素再包裹一个div，然后设置flex布局，并设置justify-content: space-between; 代码如下： ​ <html> <head> <style type="text/css"> .div-wrapper{ width: 900px; height: 100px; bac..
解析HTML中的float和margin的疑惑
走在奋斗的路上
07-31 6224
对于HTMl中的一些小疑惑，在这里进行解析一下。 一、div的理解 DIV是基于行，就是一个div占据一行，不会让别的元素，和自己同行。 span不是基于行的，就是一个span哪里有空哪里专，不会单独占用一行。 二、Float理解 Float:Css样式的float浮动属性，用于设置标签对象（如：标签盒子、标签、标签、标签等html标签）的浮动布局
HTML和CSS基础
qq_42571665的博客
12-23 351
HTML和CSSHTML文本列表链接多媒体表单结构CSS选择器selector层叠样式表文本样式colorfont-familyfont-sizefont-stylefont-weighttext-aligntext-decoration盒模型margin外边距Padding（内边距）Border（边框）displayFlexFloatViewportPosition HTML 文本 code 标签是一个短语标签，用来定义计算机代码文本。 h1-h6六个不同的 HTML 标题 p 标签定义段落 block
帮我优化以下代码<style> * { box-sizing: border-box; } .row::after { content: ""; clear: both; display: table; } [class*="col-"] { float: left; padding: 15px; } html { font-family: "Lucida Sans", sans-serif; } .header { background-color: #0603F7; color: #ffffff; padding: 3px; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 7px; background-color: #33b5e5; color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .menu li:hover { background-color: #F59B06; } .aside { background-color: #33b5e5; padding: 15px; color: #ffffff; text-align: center; font-size: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .footer { background-color: #0099cc; color: #ffffff; text-align: center; font-size: 12px; padding: 15px; } /* For mobile phones: */ [class*="col-"] { width: 100%; } @media only screen and (min-width: 600px) { /*小屏幕 */ .col-s-1 {width: 8.33%;} .col-s-2 {width: 16.66%;} .col-s-3 {width: 100%;} .col-s-4 {width: 33.33%;} .col-s-5 {width: 41.66%;} .col-s-6 {width: 75%;} .col-s-7 {width: 58.33%;} .col-s-8 {width: 66.66%;} .col-s-9 {width: 100%;} .col-s-10 {width: 83.33%;} .col-s-11 {width: 91.66%;} .col-s-12 {width: 100%;} } @media only screen and (min-width: 768px) { /*大屏幕*/ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 100%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 100%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} } </style>
最新发布
05-30
box-sizing: border-box; } .row::after { content: ""; clear: both; display: table; } .common-style { background-color: #33b5e5; color: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值